跨域问题

1、跨域问题的产生

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

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

2、跨域问题场景

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

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

  ②、前端html、js在http://front.*ex*am*ple.com上，而在js中会请求后端http://api.example.com的接口，但对于后端接口返回的Set-Cookie信息，浏览器不会做相应的处理，后续请求也就没有cookie信息。

      解决方案比较复杂（一般推荐使用token代替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。

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

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