vue cli3.x开发环境配置跨域

在正式环境中，由于后台设置cros或者我们使用nginx反向代理，所以不需要考虑跨域问题，而在前端本地开发中会遇到跨域问题，所以我们可以通过设置proxy来进行跨域。

为什么需要跨域，这是因为浏览器有同源策略。

同源策略

• 同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源
• 如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击
• 同源策略限制：
  • Cookie、LocalStorage 和 IndexDB 无法读取
  • DOM 和 Js对象无法获得
  • AJAX 请求不能发送
• 跨域限制访问，其实是浏览器的限制，其实请求有发出去，对方服务器也有响应，只不过是被浏览器的同源策略拦下来

配置proxy

原理：

1. 服务器和服务器直接没有同源策略，所以浏览器可以发给自己的服务端然后，由自己的服务端再转发给要跨域的服务端，做一层代理

而vue已经帮我们配置好了（使用到了http-proxy-middleware中间件），我们只需要设置一下proxy（vue3.x以前叫proxy table）

• 在根目录下新建vue.config.js
• 在vue.config.js中配置

module.exports = {
  devServer: {
    // 配置跨域代理
    proxy: {
      "/api": {//将http://baidui.com"映射为/api
        target: "http://baidui.com",//需要代理的baserurl，目标地址
        changeOrigin: true, //本地会虚拟一个服务端接收你的请求并代你发送该请求
        pathRewrite: {
          "^/api": "" //重写路径，比如将api/aa/bb重写为aa/bb
        },
        logLevel: "debug"//可以在终端打印日志
      }
    }
  }
};

比如我们之前的接口地址是
http://baidui.com/aa/bb
现在我们只需要写成api/aa/bb即可

注意：本配置只在本地开发有效