vue訪問外部接口設置代理，解決跨域（vue-cli3.0）

vue-cli3.0搭建的項目，平時訪問內部接口配置了攔截器，今天需要調用天氣預報的外部接口，發現跨域問題，通過配置代理解決。

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

module.exports = {
  devServer: {
    proxy: { // 為天氣接口配置代理，解決跨域
      '/proxy/': {
        'target': 'https://www.tianqiapi.com', //天氣接口地址
        'secure': false, // false為http訪問，true為https訪問
        'changeOrigin': true, // 跨域訪問設置，true代表跨域
        'pathRewrite': { // 路徑改寫規則
          '^/proxy': '' // 以/proxy/為開頭的改寫為''
        }
      }
    }
  }
}

2、然后使用axios調用接口，檢測到'/proxy'會替代為https://www.tianqiapi.com，這里實際訪問到的接口就是https://www.tianqiapi.com/api，加上參數完整的就是：

https://www.tianqiapi.com/api/?version=v6&cityid=XXX&appid=XXX&appsecret=XXX

axios.get('/proxy/api', { // 這里會匹配到前面我們設置的/proxy，代替為https://www.tianqiapi.com
    params: {
        version: 'v6',
        cityid: XXX,
        appid: XXX,
        appsecret: 'XXX'
    }
}).then(function (response) {
    console.log(response)
}).catch(function (error) {
    console.log(error)
})

3、可以訪問了