unable to make api call from vue.js project hosted on firebase to node.js backend stored in third pa-CodePudding

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 but it seems like not working

package.json file for vue.js project

{
  "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 file

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
      }
    }
  }
}

API calls are getting proxied correctly in local environment when I run project locally using npm run serve but when I create its build using npm run build and host it on firebase no api calls are getting proxied

What I think issue is: I suspect that proxy set using devServer only works for local environment (localhost) and not when project is in production mode.

Any help is appreciated... thanks

CodePudding user response：

My guess was right devServer property just works for development environments,

I created axios instance with baseUrl = http://HOST_IP:PORT/ where you should replace host_ip and port with actual values

import axios from 'axios'

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