浏览器的同源策略

[aermin]

同源策略

同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。

www.baidu.com网页的文档是由www.baidu.com的服务器所提供的，也就是在浏览器输入www.baidu.com访问的时候，浏览器会进行DNS解析域名www.baidu.com得到对应服务器IP地址并访问此地址，向服务器发起请求，获取文档资源html等，然后浏览器把资源渲染成网页，在网页中，有一个百度搜索框，用户在搜索框输入文字，点击“百度一下”，浏览器带着这个网页的origin（www.baidu.com）作为header host(主机名)向www.baidu.com的服务器发起请求，www.baidu.com的服务器检测到这请求的host是www.baidu.com，嗯，是自己人没错（同源），接受请求。

规避方法

但是如果是不同源呢，比如开发的时候，浏览器页面文档由webpack起的服务器提供，源orign可能是127.0.0.1:8080。此时无法调用example.com的接口，因为不同源，除了让example.com的服务器给你设置CORS（跨源资源共享）这种有点劳烦/侵入后端的方式，可以架设服务器代理，比如webpack server提供proxy，这样就可以: 浏览器请求同源服务器(webpack server)，webpack server代理请求( 设置了example.com为orign(host header) )example.com的服务器，从而实现跨域请求。当然，这并不意味就成功请求，如果后端设置了需要token做校验，你请求发送方还是要带上有效token的。

module.exports = {
  //...
  devServer: {
    proxy: {
      // 请求/api/users 现在会被代理到请求 http://example.com/api/users
      '/api': 'http://example.com',
      // 默认情况下，代理时会保留host header的来源，可以将changeOrigin设置为true来覆盖此行为。
      changeOrigin: true
    }
  }
};

webpack proxy 更多可看https://webpack.docschina.org/configuration/dev-server/#devserver-proxy

Reference

MDN