vue/cli 4.3.1设置代理跨域详解

这是原创：https://www.cnblogs.com/yyh28/p/12588704.html?tdsourcetag=s_pcqq_aiomsg

下面是我按照原创的操作步骤

1.在vuecli文件夹上进行新建文件：vue.config.js

// 在根目录下自行创建vue.config.js
module.exports = {
    // cli3 代理是从指定的target后面开始匹配的，不是任意位置；配置pathRewrite可以做替换
    devServer: {
      port: '8080',
      open: true,
      proxy: {
        '/api': {
          // /api 的意义在于，声明axios中url已/api开头的请求都适用于该规则，
          // 注意是以/api开头，即：axios.post({url: '/api/xxx/xxx'})
          target: 'http://服务器真实地址IP',// 服务器真实地址
          // 此处target的意义在于：造成跨域是因为访
          // 问的host与我们的请求头里的origin不一致，所以我们要设置成一致，这个具体请看下文
          changeOrigin: true,
          pathRewrite: {'^/api': '服务器真实地址IP/mysqltest'}// 服务器请求地址
          // 此处是大部分文章都不会明说的的地方，
          // 既然我们设置了代理，则所有请求url都已写成/api/xxx/xxx，那请求如何知道我们到底请求的是哪个服务器的数据呢
          // 因此这里的意义在于， 以 /api开头的url请求，代理都会知道实际上应该请求那里，
          // ‘我是服务器/api’，后面的/api根据实际请求地址决定，即我的请求url：/api/test/test，被代理后请求的则是
          // https://我是服务器/api/test/test
        }
      }
    }
  }
 

2.请求方式

  submit(){
      var url = this.HOME
      this.$axios({
        url:'/api',
        method:'get',
        params: { 
          tdsourcetag:'s_pcqq_aiomsg'
        }
      }).then(res=>{
        //成功回调
        console.log(res)
        this.list = res.data
      });
    }
  },

3.我也不是很懂，你们看着能用就行，我已经实验过，我的能用