Vue-cli3 devServe.Proxy 多地址爬坑记

什么是跨域？

当一个请求url的 协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

Vue-cli3 怎么解决的?

其实很简单,即在 devServe 配置 Proxy 即可

devServer: {
      open: true,  // 自动打开浏览器
      host: '127.0.0.1',
      port: 8081,
      https: false,
      hotOnly: false,
      disableHostCheck: true,
      proxy: {
          "/api": {
              target: 'http://xxxxxxx', 
              changeOrigin: true,
              pathRewrite: {
                  '^/api': '/'
              }
          },
          '/bpi': {
              target: "http://xxxxxx",
              changeOrigin: true,
              pathRewrite: {
                '^/bpi': '/'
            }
          }
      }

注意这里有个坑, 很坑, 特别坑 。 。 。

如果你是这么配置, 则用axios访问时, 会失效, 会失效, 会失效:

devServer: {
      proxy: {
          "/api": {
              target: 'http://xxxxxxx', 
              changeOrigin: true,
              pathRewrite: {
                  '^/api': '/'
              }
          },
          '/api_bpi': {
              target: "http://xxxxxx",
              changeOrigin: true,
              pathRewrite: {
                '^/bpi': '/'
            }
          }
      }

由于 /api 与 /api_bpi 的前几个字母相同, 则用 /api_bpi 访问接口时, 始终访问的第一个代理的地址, 所以在配置多项代理时, 名字尽可能的不要有重复,切记,切记,切记 ! ! !

如下配置也是可以, 但还是尽量不要有重复的字母

devServer: {
      proxy: {
          "/api": {
              target: 'http://xxxxxxx', 
              changeOrigin: true,
              pathRewrite: {
                  '^/api': '/'
              }
          },
          '/bpi_api': {
              target: "http://xxxxxx",
              changeOrigin: true,
              pathRewrite: {
                '^/bpi': '/'
            }
          }
      }

虽然名称字母完全一样, 但顺序不一样, 特别是前几个字母,一定注意