前端跨域概念及解决方法

前端跨域概念及解决方法

什么是跨域

同源指：两个页面域名、协议、端口均相同。
同源策略是浏览器的一个安全限制，跨域是由浏览器的同源策略造成的，是指浏览器不能执行非同源网站的脚本。
同源策略限制了以下行为：

1. Cookie、LocalStorage、和 IndexDB 无法读取。
2. DOM 和 JS 对象无法获取。
3. 请求（XHR、fetch 等）发不出去。

跨域的解决方法

JSONP跨域

JSONP: json with padding，意味着在 JSON 数据外面包裹了一层填充 Padding，即一个函数调用。

解决思路——避免非同源限制。
JSONP 的原理是利用 script 标签没有跨域限制，通过 script 标签的 src 属性设置跨域 URL，并在 URL 中指定一个回调函数名。服务端接到 JSONP 请求后，将数据包装在回调函数中，返回给浏览器。浏览器接收到响应后用回调函数来处理返回的数据。
举例，假设客户端请求一个跨域的 JSONP 数据，URL 是 http://example.com/data?callback=handleData。服务器端收到请求后，返回的响应是 handleData({ “name”: “John”, “age”: 30 })。这里的 handleData 就是客户端指定的回调函数，而 ({ “name”: “John”, “age”: 30 }) 就是 JSON 数据。整个响应就是 JSON 数据外面包裹了一层填充（padding），也就是一个函数调用。

缺陷是只能实现get请求。

代码：

<script>
    function f(data){ // 注册f函数
        alert(data)
    }
</script>
<script src="http://localhost:91?callback=f"></script> // 返回f('你好')，会立刻执行代码，就走到f函数中了。

服务端

var express = require('express');
var app = express();
app.get("/", function(req, res){
    var funcname = req.query.callback;
    res.send(funcname + "('你好')")           // f('你好')
})

CORS

CORS: Cross-Origin Resource Sharing，跨域资源共享跨域资源共享。

解决思路——跨域资源共享方案。
CORS 是一个 W3C 标准，它允许浏览器向跨源服务器发出请求，从而克服了前端请求只能同源的限制。
CORS 需要浏览器和服务器同时支持。但是主要是服务器实现 CORS 接口就可以跨域通信，因为浏览器端发现请求跨域的时候会自动添加一些附加头信息，一般无需手动设置。

简单请求 非简单请求

CORS 将请求分为两类：简单请求和非简单请求。对于能对服务器产生副作用的 HTTP 非简单请求，浏览器必须先发送一个方法为 OPTIONS 的预检请求来获取服务器是否允许该请求跨域。服务器得到确认之后，才发起真正的HTTP请求。在预检请求中，服务端也可以通知客户端是否要携带Credentials.

简单请求同时满足

• 请求方法是 GET / HEAD / POST
• 除了浏览器自动设置的头，只能设置 Fetch 规范允许设置的“CORS安全请求头”
  Accept、Accept-Language、Content-Language、Content-Type(需要注意额外的限制)、DPR 、Downlink、Save-Data、Viewport-Width、width
• 对于 Content-Type 的值只限于下面几个（注意没有application/json，现在post的请求经常使用这个，所以当发post请求的时候会触发预检请求不要意外）
  application/x-www-form-urlencoded、multipart/form-data、text/plain

对于简单请求，CORS 的策略是请求时在请求头中增加一个 Origin 字段，表示请求发出的域。服务器收到请求后，根据该字段判断是否允许该请求访问。
对于响应头，如果允许，则在 HTTP 头信息中添加 Access-Control-Allow-Origin 字段，并返回正确的结果。如果不允许则不添加该字段。

对于非简单请求，
比如请求方法是 PUT 或 DELETE，或者是发送 json 格式的请求。
对于非简单请求的跨源请求，浏览器会在真实请求发出前，增加一次 OPTIONS 请求，称为预检请求(preflightrequest)。预检请求将真实请求的信息，包括请求方法、自定义头字段、源信息添加到 HTTP 头信息字段中，询问服务器是否允许这样的操作。
服务器收到请求时，需要分别对各字段进行验证，验证通过后，会在返回 HTTP 头信息中添加：允许的域、方法、字段、有效期等信息。
当预检请求通过后，浏览器才会发送真实请求到服务器。

对于跨域（发生CORS）的请求默认是不会带上凭证信息（credentials）的，如果要发送凭证信息（credentials）就需要设置对应的标识位。
请求：

• 请求中要设置withCredentials为true。

响应：

• Access-Control-Allow-Credentials： true
• Access-Control-Allow-Origin的值不再是通配符*，应该是单一的origin。

代码：
nodejs

var express = require('express');
var app = express();
//修改响应头
app.get("/",function(req, res){
    res.header("Access-Control-Allow-Origin","*");
    res.send("你好")
})

// 借助cors模块来解决这个问题
var cors = require('cors');
app.use(cors({
    origin: ['http://localhost:8083'],
    methods: ['GET', 'POST'],
    allowHeaders: ['Conten-Type', 'Authorization']
}));

Nginx反向代理

解决思路——隐蔽跨域
使用Nginx反向代理，在a域名的请求里使用反向代理指向b域名，让浏览器以为一直在访问a网站，不触发跨域限制。

参考：
https://juejin.cn/post/6844903746837889032
https://www.cnblogs.com/n031/p/11828797.html
https://juejin.cn/post/6844903521163182088
https://www.imooc.com/article/291931