Vite proxy doesnt work with api request to a local server running in docker

[koval96]

My app is running locally on a vite dev server. I want to proxy my api requests to another local server running in docker, but approaches described in documentation don't help. When trying to request api, I get cors error

Access to XMLHttpRequest at 'http://localhost:8081/api/v1/configurations' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

vite configuration:

export default defineConfig({
  plugins: [svgr(), react()],
  define: {
    APP_VERSION: JSON.stringify(process.env.npm_package_version),
  },
  server: {
    proxy: {
      '/api': {
        target: "http://localhost:8081",
        changeOrigin: true,
        secure: false,
        rewrite: path => path.replace('/api', ''),
      }
    }
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

api request:

import axios from 'axios'

export const getConfigs = async () => {
  try {
    console.log(await axios.get("http://localhost:8081/api/v1/configurations"))
  } catch (e) {
    console.log(e)
  }
}

[sapphi-red]

server.proxy proxies request from Vite to the target. So you should request to Vite server.

import axios from 'axios'

export const getConfigs = async () => {
  try {
    console.log(await axios.get("/api/v1/configurations")) // "http://localhost:3000/api/v1/configurations"
  } catch (e) {
    console.log(e)
  }
}

[koval96]

That solved my issue, thanks

[mladen-orsolic]

Solved my issue as well! Thank you!

[sharadiyaBhattacharya]

Hii i have a question like...in my vite.config.js...when i am setting up proxy...its working fine....but after production....its not working

[v-kazantsev]

vite ignores proxy settings in production

[andres-dos-santos]

and is there any way to make it work?

my api is on localhost

[matias-gmg]

Same issue here. What would be the alternative to setting up a proxy in production using Vite?

[lequoctrung-it]

met a same issue. it throw 404 not found for that api. is anyone get the error like mine?

[sudhir4ev]

The said config here is the server.proxy in vite.config.js, which is only for the vite dev server. this is used for local development only.

In production, the app is static hosted in your environment. So the proxy needs to be configured in your environment.
e.g. If you are using ngnix to host the frontend, you can configure the proxy there.