跨域的几种解决方案

一、跨域问题背景

浏览器的同源政策：A网页设置的 Cookie，B网页不能打开，除非这两个网页"同源"。
同源是指：协议相同、域名相同、端口相同。但凡有一个不同，则不同源。

同源政策的目的：是为了保证用户信息的安全，防止恶意的网站窃取数据。

其中，同源政策规定，AJAX请求只能发给同源的网址，否则就报错。那么前后端分离如何实现跨域请求？

二、实现跨域的解决方案

1. JSONP

网页通过添加一个<script>元素，由它向跨源网址发出请求，即向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。(服务器收到这个请求以后，会将数据放在回调函数的参数位置返回。)

2. WebSocket

WebSocket是一种通信协议，使用ws://（非加密）和wss://（加密）作为协议前缀。该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信。

3. CORS

CORS是跨源资源分享（Cross-Origin Resource Sharing）的缩写。它是W3C标准，是跨源AJAX请求的根本解决方法。相比JSONP只能发GET请求，CORS允许任何类型的请求。

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

CORS请求默认不发送Cookie和HTTP认证信息。如果要把Cookie发到服务器，一方面要服务器同意，指定Access-Control-Allow-Credentials字段。

Access-Control-Allow-Credentials: true

另一方面，必须在AJAX请求中设置属性withCredentials = true；
否则，即使服务器同意发送Cookie，浏览器也不会发送。
如果要发送Cookie，Access-Control-Allow-Origin就不能设为星号，必须指定明确的、与请求网页一致的域名。同时，Cookie依然遵循同源政策，只有用服务器域名设置的Cookie才会上传，其他域名的Cookie并不会上传

实例，node.js实现前后端分离时设置跨域

// 设置跨域
app.all('*', function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*'); // 设置允许跨域的域名，*任意域名跨域
    res.header('Access-Control-Allow-Headers', 'content-type, Authorization'); // 允许的header类型
    res.header('Access-Control-Allow-Methods', 'DELETE,PUT,POST,GET,OPTIONS'); // 跨域允许的请求方式
    if (req.method.toLowerCase() == 'options') {
        res.send(200); // 让options尝试请求快速结束
    } else {
        next();
    }
});

前端设置withCredentials允许cookie、session传送

// 允许跨域携带session信息
axios.defaults.withCredentials = true;

参考文章：

阮一峰

• 浏览器同源政策及其规避方法
• 跨域资源共享 CORS 详解