I have a .env file which contains my backend server endpoint. I have configured vite.config.js file to use that endpoint from .env file. But as I have added it on vercel for production, my project is facing some issue to hit the url through proxy.
My vite.config.js file
export default ({ mode }) => {
// Load environment variables based on the mode/
const env = loadEnv(mode, process.cwd(), '');
return defineConfig({
server: {
proxy: {
'/api': {
target: env.VITE_URL,
changeOrigin: true,
rewrite: (path) => path.replace(/^/api/, '')
}
}
},
plugins: [react()]
})
};
My App.jsx file
import axios from 'axios'
function App() {
const fetchdata = async() => {
try {
console.log(import.meta.env.VITE_URL); // working well on deployment;
const res = await axios.get("/api/users"); // throwing error on deployment
console.log(res)
} catch (error) {
console.log(error)
}
}
fetchdata();
return (
<>
<h1>Hello world</h1>
</>
)
}
export default App
All the code is working well in my local system on npm run dev
but showing error on deployment on vercel and netlify. When I am trying to do console.log(import.meta.env.VITE_URL) in my App.jsx file my server endpoint is successfully printing on console, but axios request is throwing error. That means this environment variables are accessible at App.jsx file but there may be some issue at vite.config.js. Please help me
Gaurav Wagh is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.