VUE2\VUE-CLI-4 跨域代理

当我们在localhost:8080运行网页，访问localhost:9999运行的后端接口，如果后端没有设置跨域请求头，就会出现跨域的问题，这里我们可以在开发环境下配置vue.config.js 文件来代理请求解决跨域

vue.config.js 文件配置如下：

devServer: {
    open: false,    // 是否打开浏览器;
    hotOnly: true, // 是否热更新;
    proxy: {
      '/api': {   // 路径中有 /api 的请求都会走这个代理 , 可以自己定义一个,下
        target: 'http://localhost:9999/',
        secure: false,
        changeOrigin: true,  // 是否更新代理后请求的headers中host地址
        ws: true,       // 是否启用  websockets;
        pathRewrite: {   // 去掉 路径中的  /api  的这一截，毕竟真实url是没有这个前缀的
          '^/api': ''
        }
      },
    }

在上述配置下，比如我们想访问 http://localhost:9999/auth/oauth/token，通过代理我们可以设置请求地址为 /api/auth/oauth/token（注意此时不能设置baseUrl，不然默认baseUrl会重复添加），即加上了一个/api，这个前缀我们可以自由定义，所以我们能接收到来自http://localhost:8080/api/auth/oauth/token 接口到的内容，实际上就是拦截了http://localhost:9999/auth/oauth/token 返回的的内容，但是服务器那边还是会显示请求的host为http://localhost:8080，如果服务器设置了host限制的话可能被限制访问，我们可以设置changeOrigin为true来将我们请求服务的host改为 http://localhost:9999，这样服务器就以为我们是同源，就不会做出限制了。