浏览器同源策略以及解决方案

同源策略

同源是指资源地址的 "协议 + 域名 + 端⼝" 三者都相同

下面是一些地址的同源判断示例：

以下不同地址的页面, 去请求一个接口: http://store.company.com/getInfo

同源策略是 浏览器 的一种⽤于隔离潜在恶意⽂件的重要安全保护机制 !!! (服务器没有这个策略限制)

在浏览器中，⼤部分内容都受同源策略限制，除了以下三个资源获取类型的标签：

• <img>
• <link>
• script

如何实现跨域获取数据

历史上出现过的跨域⼿段有很多，主要了解3种跨域⽅案：

• JSONP

• CORS

• 服务器代理(webpack代理, Nginx反向代理)

JSONP

这是一种非常经典的跨域方案，它利用了<script> 标签不受同源策略的限制的特性，实现跨域效果。
优点：

• 实现简单
• 兼容性好

缺点：

• 只支持 GET 请求 （因为 <script> 标签只能发送 GET 请求）
• 存在被 XSS 攻击的可能，缺乏安全性保证
• 需要服务端配合改造

CORS (主流)

跨域资源共享（CORS），这是⽬前比较主流的跨域解决⽅案，

代理服务器

说明: 同源策略, 是浏览器的安全策略, 服务器于服务器之间, 没有跨域问题! 所以可以利用代理服务器转发请求!

1. 开发环境的跨域问题 (使用webpack代理服务器解决)

   配置 devServer 的 proxy 配置项

   module.exports = {
     devServer: {
      // 代理配置
       proxy: {
           // 这里的api 表示如果我们的请求地址有/api的时候,就出触发代理机制
           '/api': {
             target: 'www.baidu.com', // 我们要代理请求的地址
              // 路径重写
             pathRewrite: {
                 // 路径重写  localhost:8888/api/login  => www.baidu.com/api/login
                 '^/api': '' // 假设我们想把 localhost:8888/api/login 变成www.baidu.com/login 就需要这么做 
             }
         },
       }
     }
   }
   

2. 生产环境的跨域问题 (使用 nginx 服务器代理)
   博客参考: https://www.cnblogs.com/elfpower/p/8818759.html