跨域问题

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、不会触发跨域限制的场景
  不涉及脚本主动访问的场景：
  

 

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！