跨域及解决方案

630 阅读4分钟

跨域的概念

      浏览器有一种基本而又核心的策略,即同源策略,它保护着浏览器确保拿到的数据是安全的,如果缺少了同源策略,浏览器很容易受到XSS、CSRF等攻击。所谓同源策略即协议域名端口号必须保持一致,前端才能访问拿到想要的资源。

   如果是协议、端口号不一致的时候,前端往往是不能解决,需要nginx配置一下代理转发

       同源策略限制的有:

  1. cookie、session、localStorage
  2. ifream嵌入的dom
  3. 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去处理跨域,而后端似乎不需要变动,我不喜欢这种方式。