43

I was trying to follow the docs and created vite.config.js like this:

const config = {
  outDir: '../wwwroot/',
  proxy: {
    // string shorthand
    '/foo': 'http://localhost:4567',
    // with options
    '/api': {
      target: 'http://jsonplaceholder.typicode.com',
      changeOrigin: true,
      rewrite: path => path.replace(/^\/api/, '')
    }
  }
};

export default config;

And tried to test it with following calls:

fetch('/foo');
fetch('/api/test/get');

I was expecting to have actual requests as http://localhost:4567/foo and http://jsonplaceholder.typicode.com/test/get But both of them had my dev server as an origin like this: http://localhost:3000/foo and http://localhost:3000/api/test/get

Did I misunderstand it? How proxies should work?

I also created an issue in the Vite repo but it was closed and I did not understand the closing comment.

Roman Koliada
  • 4,286
  • 2
  • 30
  • 59

4 Answers4

47

Turns out it's needed to specify secure flag to false like this:

 proxy: {
      '/api': {
           target: 'https://localhost:44305',
           changeOrigin: true,
           secure: false,      
           ws: true,
       }
  }

Related github issue

Roman Koliada
  • 4,286
  • 2
  • 30
  • 59
32

Based on the Vite Config you need to specify it via server -> proxy inside vite.config.js:

export default defineConfig({
  server: {
    proxy: {
      "/api": {
        target: "https://your-remote-domain.com",
        changeOrigin: true,
        secure: false,
      },
    },
  },
  // some other configuration
})
SeyyedKhandon
  • 5,197
  • 8
  • 37
  • 68
srijan lama
  • 570
  • 6
  • 12
28

For debugging I highly recommend to add event listeners to the proxy, so you can see how the requests are transformed, if they hit the target server, and what is returned.

proxy: {
        '/api': {
          target: 'https://localhost:44305',
          changeOrigin: true,
          secure: false,      
          ws: true,
          configure: (proxy, _options) => {
            proxy.on('error', (err, _req, _res) => {
              console.log('proxy error', err);
            });
            proxy.on('proxyReq', (proxyReq, req, _res) => {
              console.log('Sending Request to the Target:', req.method, req.url);
            });
            proxy.on('proxyRes', (proxyRes, req, _res) => {
              console.log('Received Response from the Target:', proxyRes.statusCode, req.url);
            });
          },
        }
      }

proxy will be an instance of 'http-proxy', Please see for further info https://github.com/http-party/node-http-proxy#options

cwillinx
  • 537
  • 2
  • 13
0

suppose https://localhost:44305 is the backend and port 3000 is the frontend.

I guess the Vite document is kind of confusing.

When I set '/api' : {target: 'https://localhost:44305'}, it actually redirects to http://localhost:44305/api for http://localhost:3000/api instead of redirecting to https://localhost:44305/.

so if you use axios.get(), it should be set to 'axios.get('/api/something')' for the backend server, http://localhost:44305/api/something

Hope this trick is helpful.

Zetan Li
  • 1
  • 1