跨域问题

1、跨域问题的产生

  跨域问题的根源是浏览器的同源策略：出于安全考虑，当从A域名请求B域名的资源时，如果A、B两域名不同源（协议不同/域名不同/端口不同），浏览器就会拦截这次请求或响应。

  为什么会有跨域限制——防止窃取用户数据：比如你打开了银行网站www.bank.com进行了登录，后来你又打开了恶意网站www.hack.com，然后该恶意网站利用你在银行的登录状态，向该银行发送请求（www.hack.com→www.bank.com）来获取你的账户信息。

2、跨域问题场景

  ①、前端页面与后端API域名不同，如下所示，前端的html、js文件在http://frontend.com上，后端API部署在http://api.backend.com上：

  

    解决方案：使用CORS（跨域资源共享），由后端在响应头中指定允许访问的域名，如下所示：

    

  ②、cookie默认不能跨域

      A情形：浏览器请求http://www.example.com/接口，该接口的应答设置了cookie信息，浏览器收到接口应答后会将cookie信息保存起来，然后浏览器下次再次访问该接口的时候自动携带cookie信息。

      B情形：浏览器请求http://www.example.com/接口，该接口返回的JS中请求了http://www.example.com/test接口，因为域名和根路径相同，所以浏览器会附加前面请求http://www.example.com/接口获得的cookie。

      C情形：浏览器请求http://www.example.com/接口，该接口返回的JS中请求了http://www.example2.com/test接口，因为域名不同，所以浏览器不会附加前面请求http://www.example.com/接口获得的cookie。这就是所谓的cookie不能跨域。

      解决cookie不能跨域：服务端配置响应头Access-Control-Allow-ogirin为指定的允许前端域名，配置响应头Access-Control-Allow-Credentials为true告知浏览器允许跨域请求携带cookie； 前端发送请求时，必须显示设置credentials为include或true（不同的库写法不同），如fetch('http://b.com/api',{method:'GET',credentials:'include'})； 将cookie的SameSite设为none，Secure设为true。

      因为对于cookie默认不能跨域的解决方案比较复杂，所以一般是使用token代替cookie。

3、不会触发跨域限制的场景

  不涉及脚本主动访问的场景：