常见的跨域问题解决方案

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

什么是跨域:

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

什么是同源策略：

同源策略（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的服务实现了向下兼容。

扫描二维码关注公众号，回复： 15168698 查看本文章

前端代码：

<div>user input：<input type="text"></div>
<script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>
<script>
var socket = io('http://www.domain2.com:8080');

// 连接成功处理
socket.on('connect', function() {
    // 监听服务端消息
    socket.on('message', function(msg) {
        console.log('data from server: ---> ' + msg); 
    });

    // 监听服务端关闭
    socket.on('disconnect', function() { 
        console.log('Server socket has closed.'); 
    });
});

document.getElementsByTagName('input')[0].onblur = function() {
    socket.send(this.value);
};
</script>

后端代码：

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.'); 
    });
});