Vue | 使用devServer進行代理跨域前端開發好功能

Post category:前端相關
Post last modified:2022-08-10
Reading time:3 mins read

要解決的問題

前後端分離的專案在開發時，前端會需要自己串接api去測試資料庫抓資料來前端看看畫面有無需要改進或bug的地方，但因為是開發階段前後端可能會配置在不同的server造成跨網域CORS的問題。
https://developer.mozilla.org/zh-TW/docs/Web/HTTP/CORS

開發時可使用

Vue CLi 裡 vue.config.js 配置的 dev-server 所提供的 proxy 功能，透過設定 devServer 可以在開發時自動進行跨域處理:
直接指向 api URL，就可將api URL代理到本機port :

// vue.config.js
 devServer: {
    proxy: {
      '/api': {
        target: ''https://localhost:5123/api/',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: 'http://localhost:8081'
      }
    }
  }

常用選項配置與解釋
細節查看 https://webpack.js.org/configuration/dev-server/#devserver

// 開發配置
    devServer: {
        open: false,//open 在devServer啟動且第一次構建完成時，自動用我們的系統的預設瀏覽器去開啟要開發的網頁
        host: '0.0.0.0',//預設是 localhost。如果你希望伺服器外部可訪問，指定如下 host: '0.0.0.0'，設定之後之後可以訪問ip地址
        port: 8080,
        public: 'http://localhost:8080',
        hot: true,//hot配置是否啟用模組的熱替換功能，devServer的預設行為是在發現原始碼被變更後，通過自動重新整理整個頁面來做到事實預覽，開啟hot後，將在不重新整理整個頁面的情況下通過新模組替換老模組來做到實時預覽。
        https: false,
        hotOnly: false,// hot 和 hotOnly 的區別是在某些模組不支援熱更新的情況下，前者會自動重新整理頁面，後者不會重新整理頁面，而是在控制檯輸出熱更新失敗
        proxy: {
            '/api/': {
                target: 'https://localhost:5123/api/', //請求跨域的目標url
                secure: false, //false為http訪問，true為https訪問
                changeOrigin: true, //是否進行跨域處理
                pathRewrite: {
                    '^/api/': '' //重寫請求目標的url
                },
                ws:true
            }
        }, // 設定代理
    }

同時可搭配 .env 環境變數自訂需跨域的 api 字串及接口，在開發時作變更也比較方便。
Vue CLi 官方文件:
https://cli.vuejs.org/zh/config/#devserver-proxy