vue使用代理跨域 调试接口

调试接口可能出现跨域问题

解决办法

直接上代码 /config/index.js中，搜索proxyTable（没有就自己添加），把它改成如下对象

proxyTable: {
      '/api': {  //使用"/api"来代替"http://baidu.com"
        target: 'http://baidu.com', //源地址
        changeOrigin: true, //改变源
        pathRewrite: {
          '^/api': '/' //路径重写
        }
      }
  }

这段代码的意思是发现请求地址是/api，那么就会开启代理，使用node来模拟浏览器发起的请求，所以没有跨域限制

为了方便使用，需要不同环境下的不同配置

1. 根目录/config/dev.env.js这里面是本地dev环境的配置

module.exports = merge(prodEnv, {
  // 你的其他的一些配置。。。
  // 。。。
  // 本地调试环境下的请求地址/api
  // 对应代理的/api配置
  BASE_API: '"/api"',
})

2. 根目录/config/prod.env.js这里面是生产build环境的配置

module.exports = {
  // 你的其他的一些配置。。。
  // 。。。
  BASE_API:'"实际生产环境的请求地址"',
}

修改配置之后

重新npm run dev 重新npm run dev 重新npm run dev 配置完工后，我们找到src/main.js 这里用axios为例

import Vue from 'vue'
import axios from 'axios'

// process.env.BASE_API就得到了上面不同环境下的BASE_API
axios.create({
  baseURL: process.env.BASE_API, // 请求域名
});

OK，一切配置就绪，我们在任一地方就可以使用了

// 组件内使用axios
// 不同的配置下，this.baseUrl的值就不同
this.$http.post(`${this.baseUrl}/aaa/xxx`, {
  id: 123
}).then(res => {
  // 请求成功。。。
})

需要注意的是

本地环境下，请求的ip地址变成了本机的ip，后面还会跟上一个/api，说明代理是成功的。 例如浏览器上请求地址（这是代理地址） 192.168.0.0:8080/api/xxx 但其实真正请求的地址是 根目录/config/index.js配置的地址 + /xxx