Api not working after deployment.

[round zinc]

I am using react vite . these are my vite config file. Locally it's run fine . When i make api call to this route http://localhost:5173/api/scorecard/send-otp . After deployment it make api call to this route https://meaco.scorecard.doneproject.net/api/scorecard/send-otp
meaco.scorecard.doneproject.net this is the url showing in browser. Now i get the 200 status but there is no response. If i directly use api base path i get cors error.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
plugins: [react()],
define: {
'process.env': process.env,
},
server: {
cors:false,
proxy: {
'/api': {
secure:false,
target: 'https://api.ryto.com', // Your backend API URL
changeOrigin: true, // Ensures CORS works correctly
// rewrite: (path) => path.replace(/^/api/, ''), // Strips /api from the request
},
},
},
});
Please help

[fierce folio]

Seems like you made a duplicate question. I will answer here.

Proxy option is a development-only convenience. These proxies won't work in production

[round zinc]

If i directly use the api url i get cors error.

What i have to do for production ?

[fierce folio]

CORS error usually cannot be solved by client code; it must be solved by the server providing the API

Here are two possible solutions to solve CORS error:

• If possible, configure the API to allow your domain
• if not, usually you need to call the API from the server-side, not client-side

[round zinc]

If i use proxy i don't get cors error. Without using proxy i get cors error.

[fierce folio]

Proxy option is a development-only convenience.

In development, Vite is a server so it can make these API calls to ryto without CORS errors ( server to server communication usually don't have CORS error)

In production there is no more Vite dev server, you need to implement your own server/proxy

[round zinc]

For production shall i remove the proxy code ?

[fierce folio]

You don't need to change the proxy config in vite.config.js file

You just need to remember that The Vite Proxy rules are only for the development server. It will NOT takes any effect in production build

Therefore it is usually common to have this code in your code base in order to get the correct base URL based on whether the environment is development or production

const API_BASE_URL = import.meta.env.MODE === 'development'
  ? '/api' // "/api" is proxy to local backend during development
  : `${import.meta.env.VITE_API_BASE_URL}`; // In production, need to set variable `VITE_API_BASE_URL`

const response = await fetch(`${API_BASE_URL}/users/1`)...

[round zinc]

Thanks. So basically the main issue is with the api that is throwing cors error.

[fierce folio]

Correct. The api is throwing cors error. So you need to:

• If possible, configure the API to allow your client domain. Do you own this ryto API ?
• if not, you need to implement a server yourself so that you can call the ryto API from the server-side, not client-side

[round zinc]

Perfect. Thanks for the help. I will ask backend developer to have a look.