常见的跨域问题解决方案

常见的跨域问题解决方案：

什么是跨域:

• 跨域是指一个域下的文档或脚本师试图请求另一个域下的资源，这里的跨域是广义的。
• 其实我们通常说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。

什么是同源策略：

同源策略（SOP - Same Origin Policy）是一种约定,由NetSpace公司1995年引入浏览器，他是浏览器最核心也是最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS，CSRF等攻击，所谓的同源是指： 协议+ 域名+ 端口，三者相同，即便两个不同的域名指向一个IP地址，也非同源。

同源策略限制以下几个行为：

• Cookie、LocalStorage、和IndexDB无法读取
• DOM和JS对象无法获得
• Ajax请求无法发送

常见的跨域场景：

URL                                      说明                    是否允许通信
http://www.domain.com/a.js
http://www.domain.com/b.js         同一域名，不同文件或路径           允许
http://www.domain.com/lab/c.js

http://www.domain.com:8000/a.js
http://www.domain.com/b.js         同一域名，不同端口                不允许
 
http://www.domain.com/a.js
https://www.domain.com/b.js        同一域名，不同协议                不允许
 
http://www.domain.com/a.js
http://192.168.4.12/b.js           域名和域名对应相同ip              不允许
 
http://www.domain.com/a.js
http://x.domain.com/b.js           主域相同，子域不同                不允许
http://domain.com/c.js
 
http://www.domain1.com/a.js
http://www.domain2.com/b.js        不同域名                         不允许

跨域的解决方案：

• 通过jsoup来解决跨域
• document.domain+iframe跨域
• localtion.hash +iframe
• window.name + iframe跨域
• postMessage跨域
• 跨域资源共享
• nginx代理跨域
• nodejs中间件代理跨域
• WebSocket协议跨域

jsoup解决跨域：

通常我们为了减轻web服务器的负载，我们把css、js、img等资源放在另一台独立的服务器上，在html页面通过相应的标签在不同域名下加载资源，这是被浏览器所允许的，通过这一原理，我们可以动态的创建script，再创建一个带参网址来实现。

实现：

• 前端创建script，来实现跨域请求：

 <script>
    var script = document.createElement('script');
    script.type = 'text/javascript';

    // 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
    script.src = 'http://www.domain2.com:8080/login?user=admin&callback=handleCallback';
    document.head.appendChild(script);

    // 回调执行函数
    function handleCallback(res) {
      
        alert(JSON.stringify(res));
    }
 script>

• 后端返回值：

handleCallback({"status": true, "user": "admin"})

• ajax调用的方式：

$.ajax({
    url: 'http://www.domain2.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  // 请求方式为jsonp
    jsonpCallback: "handleCallback",    // 自定义回调函数名
    data: {}
});

不足之处：

只能实现get方式的跨域

跨域资源共享：（CORS）:

普通的跨域请求:只需要服务端设置Access-Control-Allow-Origin,若要带cookie请求:前后端都要设置。

需要注意的是：由于同源策略的限制，所读取的cookie为跨域请求接口域所在的cookie，而非当前页。

CORS已经成为了主流的跨域解决方案：

实现：

• 前端设置：
• 原生ajax

// 前端设置是否带cookie
xhr.withCredentials = true;

var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容

// 前端设置是否带cookie
xhr.withCredentials = true;

xhr.open('post', 'http://www.domain2.com:8080/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('user=admin');

xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        alert(xhr.responseText);
    }
};

• jquery ajax:

$.ajax({
    ...
   xhrFields: {
       withCredentials: true    // 前端设置是否带cookie
   },
   crossDomain: true,   // 会让请求头中包含跨域的额外信息，但不会含cookie
    ...
});

• 服务端设置：
• 若服务端设置成功，前端不会出现跨域请求的错误，否则后端设置失败
• java段设置

/*
 * 导入包：import javax.servlet.http.HttpServletResponse;
 * 接口参数中定义：HttpServletResponse response
 */

// 允许跨域访问的域名：若有端口需写全（协议+域名+端口），若没有端口末尾不用加'/'
response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com"); 

// 允许前端带认证cookie：启用此项后，上面的域名不能为'*'，必须指定具体的域名，否则浏览器会提示
response.setHeader("Access-Control-Allow-Credentials", "true"); 

// 提示OPTIONS预检时，后端需要设置的两个常用自定义头
response.setHeader("Access-Control-Allow-Headers", "Content-Type,X-Requested-With");

nginx代理实现跨域;

同源策略是浏览器的安全策略，不是HTTP协议的一部分，服务器调用HTTP接口只是使用HTTP协议，不会执行JS脚本，不需要同源策略，也就不存在跨域问题。

实现思路： 通过nginx实现一个代理服务器，来作为一个跳板机，反向代理服务访问，并且可以顺带修改cookie中的domain信息，方便cookie的写入。

• nginx的具体配置：

#proxy服务器
server {
    listen       81;
    server_name  www.domain1.com;

    location / {
        proxy_pass   http://www.domain2.com:8080;  #反向代理
        proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
        index  index.html index.htm;

        # 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用
        add_header Access-Control-Allow-Origin http://www.domain1.com;  #当前端只跨域不带cookie时，可为*
        add_header Access-Control-Allow-Credentials true;
    }
}

WebSocket实现跨域：

WebSocket protocol 是HTML5的一种新的协议，它实现了浏览器端和服务器端的全双工通信，同时允许跨域通信，是Server push技术的一种很好的实现。

原生的WebSocket使用起来很不方便，我们使用Socket.io, 他很好的封装了WebSocket接口，提供了更简单灵活的接口，也对不支持WebSocket的服务实现了向下兼容。

• 前端代码：

user input：

• 后端代码：

var http = require('http');
var socket = require('socket.io');

// 启http服务
var server = http.createServer(function(req, res) {
    res.writeHead(200, {
        'Content-type': 'text/html'
    });
    res.end();
});

server.listen('8080');
console.log('Server is running at port 8080...');

// 监听socket连接
socket.listen(server).on('connection', function(client) {
    // 接收信息
    client.on('message', function(msg) {
        client.send('hello：' + msg);
        console.log('data from client: ---> ' + msg);
    });

    // 断开处理
    client.on('disconnect', function() {
        console.log('Client socket has closed.'); 
    });
});