前端跨域概念及解决方法
什么是跨域
同源指:两个页面域名、协议、端口均相同。
同源策略是浏览器的一个安全限制,跨域是由浏览器的同源策略造成的,是指浏览器不能执行非同源网站的脚本。
同源策略限制了以下行为:
- Cookie、LocalStorage、和 IndexDB 无法读取。
- DOM 和 JS 对象无法获取。
- 请求(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