After setting proxy in vite.config.js '/api/3' making call on 5173 port instead of 5000
Description:
please note this is the first time I'm using proxy so i may not be aware of certain terminology or i might have made mistake.
I've set up the proxy in vite.config.js code screenshot shown in first image
port of frontend vite + react is 5173
port of backend node + express is 5000 (using cors)
Issue:
after setting up the proxy and making an api call in network tab its making call on localhost: 5173 instead of localhost: 5000 (please refer to image 2)
though in proxy target is localhost: 5000 as seen in image 1
troubleshooting:
made secure to false in config file but network call is still making call at 5173 tried code that was mentioned in medium, stack overflow, reditt and youtube none worked add port: 5000, but frontend wont render while using 5173 network call still assumes proxy as 5173vite.config.js code import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; import dotenv from "dotenv"; // Load and parse .env file dotenv.config({ path: "./src/.env" }); export default defineConfig({ plugins: [react()], resolve: { alias: { dotenv: "dotenv", // Resolve dotenv package "@env": "./.env", // Resolve .env file }, }, server: { proxy: { '/api': { target: 'http://localhost:5000', changeOrigin: true, secure: false, rewrite: (path) => path.replace(/^/api/, '/api'), } } } }); front end code where i'm making the call const asyncFetching = async() => { const fetching = await axios.get('/api/3') const jsonData = await fetching.json(); console.log('first', jsonData) } asyncFetching()
0 Replies