Kevin Powell - Community•3mo ago

help vite proxy running in a container

I used docker compose for frontend and backend, and i tried connecting to http://backend:5500, which works, but in my vite proxy i tried setting it to that, and it didnt work. Its probably because the request is made on the browser, not in the container, so I put http://localhost:5500 as the proxy but that doesnt work. If I directly do fetch ("localhost:5500 / ") there is no problem, so im thinking vite tries to check if the proxy is valid. heres is my vite config

import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, process.cwd(), "");

  return {
    plugins: [react()],
    server: {
      port: 3000,
      proxy: {
        "/api": {
          target: "http://127.0.0.1:5500", //env.API_URL
        },
        "/ws": {
          target: "ws://127.0.0.1:5500", //env.API_URL
        },
      },
    },
  };
});

import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, process.cwd(), "");

  return {
    plugins: [react()],
    server: {
      port: 3000,
      proxy: {
        "/api": {
          target: "http://127.0.0.1:5500", //env.API_URL
        },
        "/ws": {
          target: "ws://127.0.0.1:5500", //env.API_URL
        },
      },
    },
  };
});

1 Reply

Dracon•3mo ago

So you mean, the request from the browser cannot reach the actual backend api? I faced some issues before and updating the dockerfile resolved the issue, like the browser cannot find the backend service but trying to assign a proper port and address made it work. I hope this could help you resolve the issue.

Gaming

Programming

help vite proxy running in a container