無法從 firebase 上托管的 vue.js 項目調用 api 到存儲在第三方服務器中的后端 node.js

Question

I am using node.js as backend and vue.js as frontend Vue.js is project is hosted on firebase whereas node.js backend is hosted third party server http://113.XXX.XX.XXX:XXXX/ I want my api calls to get proxy to this backend url 但似乎不起作用

package.json vue.js 項目的文件

{
  "homepage": "https://xxxxx-xxx.web.app/",
  "name": "portal",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
}

vue.config.js 文件

module.exports = {
  publicPath: '/dist',
  devServer: {
    proxy: {
      '^/api/':{
        target: 'http://XXX.XXX.XX.XXX:XXX/',
        secure: false,
        changeOrigin: true
      },
      '^/u/api/':{
        target: 'http://XXX.XXX.XX.XXX:XXX/',
        secure: false,
        changeOrigin: true
      }
    }
  }
}

當我使用npm run serve在本地運行項目時，API 調用在本地環境中得到正確代理，但是當我使用npm run build並將其托管在 firebase 上時，沒有 api 調用被代理

我認為問題是：我懷疑使用 devServer 的代理集僅適用於本地環境 (localhost)，而不適用於項目處於生產模式時。

任何幫助表示贊賞......謝謝

Answer 1

我的猜測是正確的devServer屬性只適用於開發環境，

我用 baseUrl baseUrl = http://HOST_IP:PORT/創建了 axios 實例，你應該用實際值替換 host_ip 和端口

import axios from 'axios'

export default axios.create({
    baseURL: process.env.NODE_ENV === 'development' ? '/' : 'http://xxx.xx.xxx.xx:yyyy/',
});