跨域的概念
浏览器有一种基本而又核心的策略,即同源策略,它保护着浏览器确保拿到的数据是安全的,如果缺少了同源策略,浏览器很容易受到XSS、CSRF等攻击。所谓同源策略即协议、域名、端口号必须保持一致,前端才能访问拿到想要的资源。
如果是协议、端口号不一致的时候,前端往往是不能解决,需要nginx配置一下代理转发
同源策略限制的有:
- cookie、session、localStorage
- ifream嵌入的dom
- http请求
允许访问资源的有:
<img src=XXX>
<link href=XXX>
<script src=XXX>
跨域的解决方法
1.jsonp
jsonp是前端经常使用解决跨域的方法,原理是通过script不受同源策略的限制去访问资源,前端和后端都需要处理才能使用,前端在访问的时候增加callback方法参数,后端在接收到请求的时候会把返回的数据放到该方法并返回,前端在js里如果有该函数并执行获取请求的数据。
优点:兼容性好
缺点:只支持get请求
<!-- 通过原生使用 script 标签 -->
//前端
<script> function show(data) {
console.log(data);//我不爱你
}
</script>
<script src="http://127.0.0.1:3000?wd=Iloveyou&callback=show"></script>
//后端
// server.js
let express = require('express')
let app = express()
app.get('/say', function(req, res) {
let { wd, callback } = req.query
console.log(wd) // Iloveyou
console.log(callback) // show
res.end(`${callback}('我不爱你')`)
})
app.listen(3000)
同时ajax、axios实现jsonp原理也是如此
2.cors
CORS 需要后端支持。不兼容IE8/9,IE 8 和 9 需要通过 XDomainRequest 来实现。如果想在请求头信息传递cookie信息,需要设置具体域名和withCredentials属性。服务端设置 Access-Control-Allow-Origin 就可以开启 CORS。 该属性表示哪些域名可以访问资源,如果设置通配符则表示所有网站都可以访问资源。虽然设置 CORS 和前端没什么关系,但是通过这种方式解决跨域问题的话,会在发送请求时出现两种情况,分别为简单请求和复杂请求。
1) 简单请求
条件1:使用下列方法之一:
- GET
- HEAD
- POST
条件2:Content-Type 的值仅限于下列三者之一:
- text/plain
- multipart/form-data
- application/x-www-form-urlencoded
2) 复杂请求
不符合以上条件的请求就肯定是复杂请求了。 复杂请求的CORS请求,会在正式通信之前,增加一次HTTP查询请求,称为"预检"请求,该请求是 option 方法的,通过该请求来知道服务端是否允许跨域请求。比如请求方法是PUT或DELETE,或者Content-Type字段的类型是application/json。
预检请求的回应
服务器收到"预检"请求以后,检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后,确认允许跨源请求,就可以做出回应。
一旦服务器通过了"预检"请求,以后每次浏览器正常的CORS请求,就都跟简单请求一样,会有一个Origin头信息字段。服务器的回应,也都会有一个Access-Control-Allow-Origin头信息字段。
优点:所有请求方式都支持,前端不用加什么配置
缺点:不兼容ie 8/9及以下
3.nginx反向代理
实现原理类似于Node中间件代理,需要你搭建一个中转nginx服务器,用于转发请求。
使用nginx反向代理实现跨域,是最简单的跨域方式。只需要修改nginx的配置即可解决跨域问题,支持所有浏览器,支持session,不需要修改任何代码,并且不会影响服务器性能。
实现思路:通过nginx配置一个代理服务器(域名与domain1相同,端口不同)做跳板机,反向代理访问domain2接口,并且可以顺便修改cookie中domain信息,方便当前域cookie写入,实现跨域登录。
优点:前后端不需要配置,兼容性好
4.node中间层代理
实现原理:同源策略是浏览器需要遵循的标准,而如果是服务器向服务器请求就无需遵循同源策略。 代理服务器,需要做以下几个步骤:
- 接受客户端请求 。
- 将请求 转发给服务器。
- 拿到服务器 响应 数据。
- 将 响应 转发给客户端。
主要使用http-proxy-middleware 做一个类似webpack里面的devServer
缺点:不能传cookie等信息,前端需要自己多加node层通过cors或者jsonp去处理跨域,而后端似乎不需要变动,我不喜欢这种方式。