跨域问题-牛翰网

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（跨域资源共享），由后端在响应头中指定允许访问的域名，如下所示：

②、前端html、js在http://front.example.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、不会触发跨域限制的场景

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