CORS issue - Redirect is not allowed for a preflight request

UPDATE: I was able to solve the issue thanks to the Sean's suggestion below.

Look at the response headers and see where the request wants to re-direct the client to (using the Location header). That might hint at what part of your stack is causing an issue.

The issue was that the request wanted to redirect the client to the link that contained www. (https://www.example.com/api) , which was missing in Axios Reqest link. I solved it by adding www.

ORIGINAL QUESTION:

I am hoping to get help with the issue I've been struggling for a while now. I am developing a web app with React and NodeJS Express. After deploying both back and front end to Render.com I bought a domain and configured DNS in the following way:

• client - https://example.com/
• server - https://api.example.com/

And the issue is connected to the following error that appears when making the login request (and any other reqs) from the client.

Access to XMLHttpRequest at 'https://api.example.com/admins/login' from origin 'https://www.example.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

On Safari I get the following message:

Preflight response is not successful. Status code: 307

Just in case, the request itself is carried out successfully in Postman. Additionally, I also managed to configure a rewrite rule on Render that rewrites requests from example.com/api/* to api.example.com/* , which also, when set, produces the same error.

Here is my NodeJS CORS configuration, I have it enabled with the following lines:

As for the origin link, I am familiar that for some people the issue was caused by the absence/presence of a slash at the end. I tried different ways, which made no effect whatsoever.

const cors = require("cors");
const corsOptions ={
   origin: "https://example.com/", 
   credentials:true,         //access-control-allow-credentials:true
   optionSuccessStatus:200,
};

app.use(cors(corsOptions));

After an intense googling session, I tried configuring cors the following way,** which also did not help**

const cors = require("cors");
app.use(cors());   //also tried including my corsOptions from the previous snippet
app.options('*', cors());

Finally, I tried using a custom middleware presented in this answer, which also did not help. https://stackoverflow.com/a/13148080/20265378

As part of CORS checking, browsers will perform a "pre-flight" OPTIONS request to your URL (in this case, https://api.example.com/admins/login).

The error message you received covers why the pre-flight check fails, denying your actual API request:

Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

And

Preflight response is not successful. Status code: 307

When the client is making this pre-flight request to https://api.example.com/admins/login, the server is responding with a HTTP 307 Temporary Redirect response code, indicating it wants the client to redirect the request to another URL. This is not allowed during pre-flight - the response must come back properly and directly from the requested target.

Modern web servers have built-in functionality to handle CORS pre-flight requests, so I suspect either a server misconfiguration, or some odd application code is causing this redirect to happen.

To debug:

1. Inspect the pre-flight request. In Chrome, preflights are listed under the "Network Tab" while the "All" or "Other" filter is active:

Look at the response headers and see where the request wants to re-direct the client to (using the Location header). That might hint at what part of your stack is causing an issue.

2. Inspect your server access and application logs. Look for the OPTIONS requests and, again, look at the redirect URL and see if it rings any bells.

   If you are logging application requests, you can compare logs and see if the pre-flight request hits your application. If it does, you know something in the application is redirecting. For what it's worth, the CORS configuration you have in your express application code looks fine.

3. Inspect server configuration, assuming you're using something like nginx to at the front of your server, which proxies requests to your express application.

If you post more specific information after further debugging attempts, I can refine this answer to be more specific.