Server.proxy didn't work after npm run build.

[hauchu1998]

Hey guys. I'm new to building a front-end application. Here are some questions related to the proxy I encountered. The problem is that I can test my deployed backend server (url like https://my-backend-server.com) twith proxy during the development mode (http://localhost:3030). However, after I deployed the dist folder after npm run build with Apache, I can no longer access the backend server.

Here is my packages version:

 "dependencies": {
    "autoprefixer": "^10.4.5",
    "axios": "^0.27.2",
    "ethers": "^5.6.4",
    "postcss": "^8.4.12",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "tailwindcss": "^3.0.24",
    "vite-plugin-imagemin": "^0.6.1"
  },
  "devDependencies": {
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "@vitejs/plugin-react": "^1.3.0",
    "typescript": "^4.6.3",
    "vite": "^2.9.5"
  }

When I was testing the API in the development mode. I use Axios to send the request. In order to solve to CORS problem, I set proxy in the vite-config.js., which is shown below.

This is how I write axios request.

// AxiosAPI.tsx
export const getServerTokenApi = async () => {
    axios.get('/api/api/get_token')
    .then((res) => {
        console.log(res);
        localStorage.setItem('auth_token', res.data.token);
    })
    .catch((err) => console.log(err))
}

This is the config I wrote in vite.config.js:

server: {
      port: 3030,
      proxy: {
        '/api': {
          target: "https://my-backend-server.com",
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        }
      }
}

The configs work fine while npm run dev, I can successfully get what I want from localhost:30303, and the server will show "GET /api/get_token". However, after I build the project and deployed it on the same domain with my backend server and have a url, lets called https://my-frontend-server.com. While I send the "get_token" request, it failed to access. The server will show "GET /api/api/get_token".
Is there something wrong setting the proxy configs, or whether the proxy don't work after I build and deploy the site.

Its seem very basic, but I can't solve the problem which is really driving me crazy.

[sil2]

same issue here :(

[B10532021]

Its seems that the vite proxy is only for dev mode?

[sil2]

Proxy config aren't bundled into the build output?

[B10532021]

The proxy feature i think. It might not be exactly correct, but its all i know so far.

[StevenStavrakis]

Any updates on this?

[BlackCrowxyz]

I fixed this issue by axios itselt!
You just need to add baseurl into axios

await axios({
    baseURL: YOUR_BASE_URL_HERE,
    method: method,
    ...
}

Vite does not provide proxy for build, but only for developement!
https://vitejs.dev/config/server-options.html#server-proxy

[samislam]

Unlike create-react-app, Vite does not provide the proxying configurations after the build, but only for development.

So, in order to support the build, you have to manually check for the environment variable to see if you're in production or development as follows:

for example, this is the baseUrl property in redux-toolkit-query, or fetch(), or even axios(), whatever you're using

// for example, this is the baseUrl property in redux-toolkit-query, or fetch(), or even axios(), whatever you're using
import.meta.env.MODE === 'development' ? `api/v1` : HOST + '/v1'

Assuming this is your vite.config.js file (as an example, it doesn't have to be exactly like mine):

process.env = { ...process.env, ...loadEnv(mode, process.cwd()) }
return defineConfig({
    plugins: [react()],
    server: {
      proxy: {
        '/api': {
          target: process.env.VITE_mainAPI_host,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ''),

[boomshakar]

If your app is hosted on VERCEL / NETLIFY, you need to complete it by following this format #17381 (comment) .

[dlwhitehurst]

I had the same issue when I first started my Vite application. I'm using multiple microservice APIs and I also have security for the APIs where my JWT needs see the same origin. This is why I needed proxy-paths for my Vite "DEV" server. When I build, I pull the /dist directory into a Docker build for NGINX. This is what I host as "app:1.0.0" on Kubernetes. I setup a NGINX configuration prior to the Docker build for Production.

So, for local dev, I use the vite.config.ts and for production I copy in my NGINX config that has this into a Docker build of an NGINX server. This is the same concept just configured differently.

        location /userauth {
            proxy_pass https://userauth.virtualyou.info;
        }

        location /personal {
            proxy_pass https://personal.virtualyou.info;
        }

        location /medical {
            proxy_pass https://medical.virtualyou.info;
        }

        location /financial {
            proxy_pass https://financial.virtualyou.info;
        }

        location /administration {
            proxy_pass https://administration.virtualyou.info;
        }

I also use a bash script to prepare my application for either environment. The bash script maintains quality once you get it right.

https://github.com/virtualyou/vytools/blob/main/bin/setup.sh

P.S. Figure it out and then use scripts to remove the hand-work each time you are ready to switch from local to production. Remember, the production /dist is nothing like the local environment. You're taking all the code, assets, styling, etc. and mashing it down into static files. I'm an enterprise Java professional and it still gives me pause. Keep at it, I think Vite has something here.

[lokeshshriwas]

const cors = require("cors")

I tried this code, and it runs fine on both localhost and deployment. However, there's an issue: it works perfectly on Mozilla Firefox, but on Chrome and Edge, it only works on localhost. In deployment, the code breaks.

const corsOptions = {
  origin: "your website link",
  credentials: true,
  optionSuccessStatus: 200,
  methods: ["GET", "HEAD", "PUT", "PATCH", "POST", "DELETE", "OPTIONS"],
};

app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "tour website link");
  res.setHeader("Access-Control-Allow-Credentials", "true");
  res.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
  res.setHeader("Access-Control-Allow-Headers", "Content-Type");
  // res.setHeader("Access-Control-Allow-Headers", "X-Requested-With")

  next();
});

app.use(cors(corsOptions));

[devodii]

I'm pretty suprised that this issue hasn't been addressed.
Well.. to solve this, you simply create a base axios instance for your requests (if you're already using axios to fetch get data from your backend, else, this is a good time to start using it. see installation guide)

By the way, I know that it's not the best way to do it, but it just works 🙏🏽

Your instance should be of this sort:

import axios from 'axios';

const axiosInstance = axios.create({ baseURL: import.meta.env.VITE_API_URL });
axiosInstance.interceptors.request.use(
  config => {
    if (config.url && config.url.startsWith("/api/")) {
      config.url = config.url.replace("/api/", "/");
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

export default axiosInstance;

I added an interceptor to the request, so that i can transform the url to whatever shape i want. more about the interceptor...

Here's a sample of how you'd use it to make a request:

import axiosInstance from "./axios-instance";

async function fetchAllCourse() {
  const { data } = await axiosInstance.get("/api/courses");
  return data;
}

export { fetchAllCourse };

Let me know if this helps.

[Gaurav-Wagh1]

Not working, I have just tried your solution but it is not working. Can you please give my any other solution for this problem

[boomshakar]

Hi @hauchu1998 Kindly check #17381 (comment) , i believe this could solve your issue.