vue访问外部接口

vue直接访问外部链接报错：ERR_FAILED

1、在vue.config.js中配置代理

module.exports = {
  devServer: {
    proxy: { //外部接口配置代理，解决跨域
      '/proxy/': {
        'target': 'https://www.test.com', //接口地址
        'secure': false, // false为http访问，true为https访问
        'changeOrigin': true, // 跨域访问设置，true代表跨域
        'pathRewrite': { // 路径改写规则
          '^/proxy': '' // 以/proxy/为开头的改写为''
        }
      }
    }
  }
}

2、然后使用axios调用接口，检测到'/proxy'会替代为https://www.test.com，这里实际访问到的接口就是https://www.test.com/api

axios.get('/proxy/api', { // 这里会匹配到前面我们设置的/proxy，代替为https://www.tianqiapi.com
    params: {
        version: 'v1',
        city: 'aa'
    }
}).then(function (response) {
    console.log(response)
}).catch(function (error) {
    console.log(error)
})