vue-cli 3.0之跨域请求devServer代理配置

搬运自： https://blog.csdn.net/Liu_yunzhao/article/details/90520028

概念

　　同源策略

　　　　同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。

　　　　可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。
　　　　所谓同源是指：协议、域名、端口都相同。

　　跨域

　　　　跨域就是不同源，就是不满足协议、域名、端口都相同的约定。

　　　　

　　　　如：看下面的链接是否与 http://www.test.com/index.html 同源？

　　　　　　http://www.test.com/dir/login.html 同源
　　　　　　https://www.test.com/index.html 不同源 协议不同(https)
　　　　　　http://www.test.com:90/index.html 不同源 端口不同(90)
　　　　　　http://www.demo.com/index.html 不同源 域名不同(demo)

　　　　当协议、域名、端口中任意一个不相同时，就是不同源。若不同源之间相互请求资源，就算作跨域。

跨域请求devServer代理几种配置

　　1.  先在项目的根目录下新建 vue.config.js 文件
　　2.  在module.exports内设置devServer来处理代理

　　

　　3. 统一代理

　　　　1). 设置 axios 的 baseURL 值（任意）

　　　　

　　　　axios.defaults.baseURL = '/api'

　　　　这样会为所有的 请求url 前面都加上 ‘/api’，方便做 统一代理。

　　　　假设请求的url地址为 /allin/policy/getProductInfo

 　　axios({
     　　 ...
      　　url:'/allin/policy/getProductInfo',
      　　...
  　　})

　　　　那么真正发送的请求是：/api/allin/policy/getProductInfo

 devServer: {
     proxy: { //匹配规则
         '/api': {
             //要访问的跨域的域名
             target: 'http://www.test.com',
             ws: true,
             secure:false, // 使用的是http协议则设置为false，https协议则设置为true
             changOrigin: true,
             pathRewrite: {
                 '^/api': ''
             }
         }
     }
 }

相当于请求遇见 /api 才做代理，但真实的请求中没有/api，所以在pathRewrite中把 /api 去掉, 这样既有了标识, 又能在请求接口中把 /api 去掉。

注意：
　　pathRewrite：如果不写则只能修改代理的域名，如果写则可以修改代理的域名和后边的路径。

解决线上环境跨域问题

1. 前端先按 上述代理方式 做统一代理
2. 后端 nginx 反向代理配置