一般情况下跨域是通过ajax的方式请求数据，通过js在不同的域之间进行数据传输或者通信；

只有通过ajax方式获取请求的时候才会有跨域问题需要解决；

例如在本地模拟两个服务端。 一个服务端去通过ajax去请求另外一个服务端的数据的时候就会产生这个问题；

const express = require('express');

const path = require('path');

const app = express();

//托管静态资源

app.use(express.static(path.join(__dirname,'public')));  

//处理请求

app.get('/',(req,res)=>{

     res.sendFile(path.join(__dirname,'./跨域ajax.html'));

});

//处理ajax获取数据的路由

app.get('/blog',(req,res)=>{

     let blogs = require('./blog.json');

    res.json(blogs);

});

app.listen(3000,()=>{

    console.log('3000 is on');

})

URL的详细格式是

1.协议 http  https ftp  还有mongodb 等

2.身份验证 ftp协议中有，http和HTTPS是没有的

3.主机名 包括域名和ip两种形式；

4.端口

5.路径

6.查询字符串

7.哈希值

在jquery的ajax方法的请求url中，如果协议，主机名，端口号有任何一个不同，name就属于跨域；域名和ip也是不等的，例如127.0.0.1和localhost是不等的；

在web开发中，有一个著名安全 策略叫同源策略

使用ajax请求数据的时候，值允许同域的请求，非同域的请求一概拒绝

实现跨域请求一般三种方法。 通过cors  jsonp  代理

第一种方式比较局限，需要服务端的代码在我的控制方为之内，

后台提供的api我有权限去操作，只需要在服务端编写代码；浏览器端不需要编写任何代码；

第二张方式是使用jsonp json with packing  将json数据包裹起来，json 作为参数，进行函数调用并且返回；需要有权限编写服务端的代码。如果请求另外一个非自己网站，就不行了；一个提供数据服务来提供api接口。一个提供http服务来显示页面。jsonp的原理就是自己创建一个script标签，由于script标签可以请求别的地址不收到限制； 所以可以自己写函数来创建script标签，src属性则是需要跨域请求的地址；

function addScript(url){

   var script = document.createElement('script');

   script.src = url;

   document.body.appendChild(script);

}

第三种方式采用代理的方式， 可以获取其他接口的数据

代用代理的服务端代码如下

const express = require('express');

const path = require('path');

const http = require('http');

const app = express();

app.use(express.static(path.join(__dirname, 'public')));

app.get('/', (req, res) => {

    res.sendFile(path.join(__dirname, './ajax获取电影数据.html'));

});

app.get('/proxy', (req, res) => {

    //获取目标的url

    let url = req.query.url;

    //需要向目标url发送请求；

    //将数据请求回来

    http.get(url, (response) => {

        let str = '';

        //以流的方式接受数据

        response.on('data', (chunk) => {

            str += chunk;

        });

        response.on('end', () => {

            //接受所有数据之后，返回str

            res.json(str);

        });

    });

});

app.listen(3000, function() {

    console.log('App listening on port 3000!');

});

客户端代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="js/jquery-1.11.3.js"></script>

</head>

<body>

    <h2>get movie</h2>

    <button type="button" id="button">get movie</button>

    <script>

        $('#btn').on('click', function() {

            $.ajax({

                url: '/proxy',

                type: 'get',

                data: {

                    url: 'http://m.maizuo.com/v4/api/billboard/home?__t=1489757848973'

                },

                dataType: 'json',

                success: function(res) {

                    console.log(JSON.parse(res));

                }

            })

        })

    </script>

</body>

</html>

　　

基于nodejs中实现跨域的方法的更多相关文章

  1. JS中实现跨域的方法总结

    今天早上在地铁看了点基础知识的考察题,看到了一个JS跨域的问题,仔细想了想自己脑子里竟然只剩下jsonp跨域和用nginx反向代理进行跨域,想着还有别的几种方法,就是想不起来,这个人呢,一上岁数这个脑 ...

  2. web项目中的跨域问题解决方法

    一种是JSONP 一种是 CORS. 在客户端Javascript调用服务端接口的时候,如果需要支持跨域的话,需要服务端支持. JSONP的方式就是服务端对返回的值进行回调函数包装,他的优点是支持众多 ...

  3. 基于CORS的GeoServer跨域访问策略

    GeoServer的跨域访问问题,有多种解决方法,本文介绍一种基于CORS的GeoServer跨域访问方法. CORS简介 CORS是一个W3C标准,全称是"跨域资源共享"(Cro ...

  4. Springboot中关于跨域问题的一种解决方法

    前后端分离开发中,跨域问题是很常见的一种问题.本文主要是解决 springboot 项目跨域访问的一种方法,其他 javaweb 项目也可参考. 1.首先要了解什么是跨域 由于前后端分离开发中前端页面 ...

  5. js中各种跨域问题实战小结（二）

    这里接上篇:js中各种跨域问题实战小结(一) 后面继续学习的过程中,对上面第一篇有稍作休整.下面继续第二部分: -->5.利用iframe和location.hash -->6.windo ...

  6. js中各种跨域问题实战小结（一）

    什么是跨域?为什么要实现跨域呢? 这是因为JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.也就是说只能访问同一个域中的资源.我觉得这就有必要了解下javascript中的同源策略 ...

  7. php中ajax跨域请求---小记

    php中ajax跨域请求---小记   前端时间,遇到的一个问题,情况大约是这样: 原来的写法: 前端js文件中: $.ajax({ type:'get', url:'http://wan.xxx.c ...

  8. 在ASP.NET 5应用程序中的跨域请求功能详解

    在ASP.NET 5应用程序中的跨域请求功能详解 浏览器安全阻止了一个网页中向另外一个域提交请求,这个限制叫做同域策咯(same-origin policy),这组织了一个恶意网站从另外一个网站读取敏 ...

  9. AJAX（XMLHttpRequest）进行跨域请求方法详解（一）

    注意:以下代码请在Firefox 3.5.Chrome 3.0.Safari 4之后的版本中进行测试.IE8的实现方法与其他浏览不同. 跨域请求,顾名思义,就是一个站点中的资源去访问另外一个不同域名站 ...

随机推荐

  1. 【AIA】培训感悟

    最主要一个感悟,有钱了一定要买香港的保险.存个100万,年薪30就行,先把这个做目标.

  2. Forms组件与钩子函数

    目录 一:Forms组件 1.案例需求: 2.前端 3.后端 二:form表单前后端动态交互 1.form组件 2.为什么数据效验非要去后端 不能在前端利用js直接完成呢? 3.举例:购物网站 三:基 ...

  3. Python 基于 selenium 实现不同商城的商品价格差异分析系统

    1. 前言 selenium 原本是一款自动化测试工具,因其出色的页面数据解析和用户行为模拟能力而常用于爬虫程序中,致使爬虫程序的爬取过程更简单.快捷. 爬虫程序与其它类型程序相比较,本质一样,为数据 ...

  4. Wireshark DTN解析器拒绝服务漏洞

    受影响系统:Wireshark Wireshark 2.2.0 - 2.2.1Wireshark Wireshark 2.0.0 - 2.0.7描述:CVE(CAN) ID: CVE-2016-937 ...

  5. Windows XP系统搜索故障及处理办法点点通

    故障1:单击资源管理器工具栏上的"搜索"按钮或者按F3,系统无任何响应. 解决方法:首先进入C:\Windows\inf文件夹(该文件夹属性为隐藏),右键单击srchasst.in ...

  6. RandomStringUtils 生成随机字符串

    代码: System.out.println(RandomStringUtils.randomAlphanumeric(32));System.out.println(RandomStringUtil ...

  7. DDOS反射攻击

    0x01 环境 包含3台主机 attact 作为攻击方,使用Centos7.2 reflect 作为流量放大器,安装有dns .ntp .memcached三种可以放大流量的服务 windows_se ...

  8. go语言学习入门篇 3-- 程序执行流程

    先看下 Go 语言的程序结构: package main // 当前包名 import "fmt" // 导入程序中使用到的包 // 初始化函数 func init() { // ...

  9. 什么是BASH？

    BASH是Bourne Again SHell的缩写.它由Steve Bourne编写,作为原始Bourne Shell(由/ bin / sh表示)的替代品.它结合了原始版本的Bourne Shel ...

  10. Kafka学习（一）

    作者:普适极客链接:https://www.zhihu.com/question/53331259/answer/1321992772来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载 ...