CORS 跨域详解

CORS policy

• 发出请求的地址与目标地址，域名(IP)+端口一致，即为，同源
• 浏览器持有用户大量敏感数据。因此，同源安全策略，即限制跨域请求(尤其基于Ajax发出的请求)，是浏览器的一种安全机制
• 即使本地应用，浏览器打开的网页试图从8081向8080端口发出请求，依然是跨域请求
• 跨域资源共享是一种，允许从提供一个资源的域外的另一个域请求受限资源的机制

总结: 只有域名+端口一致, 才为同源

CORS 的处理

开发测试环境解决方案

1. 基于Vue配置, 实现跨域

   • 通过修改axios.defaults.baseURL

     ​ 优点: 简单,

     ​ 缺点: 不利于开发环境与生产环境的切换

   • 通过配置devServer

     devServer: {
      // 默认端口
      port: 8081,
      // 设置代理
      proxy: {
        "/api/": {
          // 目标 API 地址
          target: "http://localhost:8080",
          // 将主机标头的原点更改为目标URL
          changeOrigin: true
        }
      }
     },
     

2. 后端服务配置CORS跨域规范

生产环境

1. 由部署的静态web容器(nginx等)配置反向代理实现跨域
2. 后端服务配置CORS跨域规范