CODEWITHSUNDEEP
javascriptwebpackvuejs2axios
gbianchi
gbianchi

Reputation: 2138

Proxy included in package.json not working

I have a VUE application that has a net.core backend.

To avoid CORS problems, I would like to use a proxy in all calls. However, my attemps didn't work, since there is no way that my calls get proxied.

Application was made with vue CLI 3, and use typescript.

I try to add to package.json the next lines, but the proxy still is not working. Every call is made to the same server, and not get proxied.

"proxyTable": {
    "/api":{
      "target": "http://localhost:5000",
      "changeOrigin": true,
      "pathRewrite": {
        "^/api": ""
      }
    }
  },

"proxy": {
    "/api":"http://localhost:5000"
      }

No one of those lines change the calling port.

Axios call are for example:

Axios.post(process.env.VUE_APP_BASE_URI + 'me', { }, {withCredentials: true})

Where the constant is define like:

VUE_APP_BASE_URI=api/

The constant work and I can use it. Without the constant, the error is the same.

Is there any problem in the way I had write the proxy, or is there something else?

my package.json:

{
  "name": "xxxxxx",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "proxyTable": {
    "/api":{
      "target": "http://localhost:5000",
      "changeOrigin": true,
      "pathRewrite": {
        "^/api": ""
      }
    }
  },
  "dependencies": {
    "axios": "^0.18.0",
    "bootstrap-vue": "^2.0.0-rc.11",
    "font-awesome": "^4.7.0",
    "register-service-worker": "^1.0.0",
    "vue": "^2.5.17",
    "vue-class-component": "^6.0.0",
    "vue-property-decorator": "^7.0.0",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.0",
    "@vue/cli-plugin-pwa": "^3.0.0",
    "@vue/cli-plugin-typescript": "^3.0.0",
    "@vue/cli-service": "^3.0.0",
    "typescript": "^3.0.0",
    "vue-template-compiler": "^2.5.17"
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

One of the attemps was using the recomendations in this page and no luck.

I also readed:

Proxy in package.json not affecting fetch request

But I have a react app where it works. But not in this VUE one.

Edit

According to an answer, I added this file:

// vue.config.js
export const devServer = {
    proxy: {
        '/app': {
            target: 'http://localhost:5000/app/',
            ws: true,
            changeOrigin: true
        },
        '/api': {
            target: 'http://localhost:5000/app/api/',
            ws: true,
            changeOrigin: true
        }
    }
};

Still, no proxy is working.

This doesn't work either:

  module.exports = {
    devServer: {
      proxy: 'http://localhost:5000/app/'
    }
  }

Upvotes: 3

Views: 2960

Answers (1)

kraag22
kraag22

Reputation: 3514

When using Vue CLI tools you don't set proxy info in package.json file, but in vue.config.js file. There is docs about it here https://cli.vuejs.org/config/#devserver-proxy

If you don't have vue.config.js file, just create it

This is the correct syntax

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://4.3.2.1:8765',
        ws: true,
        changeOrigin: true,
      },
    },
  },
}

Upvotes: 3

Related Questions