Cannot access my backend from my frontend

General
1

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
2

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!

3

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
4

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?

2 Likes
5

I am encountering the same issue. Have there been any updates, or have you found a solution yet?

6

There is no solution, just have to wait: Early preview of public ports! - #17 by romannurik

7

Sorry for the delay folks — we have a fix candidate rolling out. We’ll update the main discussion thread on this issue as soon as we’ve validated.

8

Simply configure cors on your server to accept requests from diff origins,
origins other than 3000 and 5173 will not be processed.
on prod you have to change them as per your FE urls

app.use(cors({
    origin: ['http://localhost:5173', 'http://localhost:3000'], // Allowed origins
    credentials: true, // Allow cookies or headers like Authorization
}));

this will allow your frontend to communicate with backend.