Vue-proxy解決跨域問題

發表於 | 分類於 ，

在開發時很容易遇到跨域問題，我自己都是改寫後端使用CROS(Cross-Origin Resource Sharing)設置，不過總是會遇到無法從後端下手的時候，這時候我們可以考慮在前端 http-proxy-middleware代理解決跨域的問題，這工具替我們的local端建立代理層，讓我們呼叫遠端API更簡單，下面紀錄Vue-CLI 3的配置寫法。

創建config檔

之前說過Vue-CLI 2=>3將原本的config檔隱藏了，所以我們先建立一個vue.config.js。

配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://example.com/', //看自己對應的域名
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

也可以配置其他設定，像是port也可以更改。

之後在呼叫API時就能這樣使用，Vue建議使用axios來呼叫API。

1
2
3
axios.get('/api/getData').then(res => {
  console.log(res)
})

這樣就能幫我們代理了，可以去F12的Network看，就能發先原先路徑被代理成http://example.com/getData。