I am trying to run a MERN application in the workspace. I have both the frontend and backend in the same workspace. My NodeJS server is running in port 4000 where as my React application is running in port 5173
and the mapped urls for both of them are as follows:
Backend: 5173-idx-workwave-1716606407475.cluster-bs35cdu5w5cuaxdfch3hqqt7zm.cloudworkstations.dev
Frontend: 4000-idx-workwave-1716606407475.cluster-bs35cdu5w5cuaxdfch3hqqt7zm.cloudworkstations.dev
when trying to access the backend from the browser directly it does hit the server but when trying to hit the server using the frontend it responds with
Access to XMLHttpRequest at âbackendurlâ) from origin âfrontendurlâ has been blocked by CORS policy: No âAccess-Control-Allow-Originâ header is present on the requested resource.
and I have tried the steps from the docs as well
and have ran the following bash command
export port=4000
export API_SERVICE=âhttps://4000-idx-workwave-1716606407475.cluster-bs35cdu5w5cuaxdfch3hqqt7zm.cloudworkstations.devâ
echo $API_SERVICE
still cannot access the server from the frontend
1 Like
Hi @NimAce,
Can you check my post about the same issue and confirm if you have the same result: Cors Issue?
I think your application has an Authorization token sent to its backend, is this correct? Also, your calls should include the withCredentials
parameter (depending on what library you are using).
Looking forward to your feedback!
Thank you @Yel-kobi,
It did fix the issue. All I had to do was add
withCredentials: true,
Thank you for your help.
It works for get request but doesnt work with post request
Is there any thing I need to change for it too?
the server.js has
cors({
origin: process.env.CLIENT_URL,
credentials: true,
methods: ["GET", "POST", "PUT", "DELETE"],
allowedHeaders: ["Content-Type", "Authorization"],
})
);
and for the frontend I am using axios
as follows
API.post("/user/auth/login", data)
where API is
import axios from "axios";
const API = axios.create({
withCredentials: true,
baseURL: import.meta.env.VITE_API_URL,
});
export default API;
4 Likes
I am getting the same issue , above solution works for GET Method , but not working for POST method getting âpreflight invalid allow credentialsâ cors error. Do you find any solution for this?
1 Like