Having CORS Error due to preflight error

1

Hi,

I have a build a MERN typescript app. It was running perfectly, the api was on cyclic and the client on vercel but due to the shut down of cyclic I need to find a new free host plateform for my api.

I have chosen render.com to host the api but I am facing a CORS error:

Access to XMLHttpRequest at 'api' from origin 'client' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Here was the CORS settings that were used between cyclic and vercel.

const corsOptions = {
  origin: origin,
  credentials: true,
  methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
  // preflightContinue: true,
  allowedHeaders: ["Content-Type", "Authorization"],
  exposedHeaders: ["Content-Range", "X-Content-Range"],
}

app.use(cors(corsOptions))

All the endpoints start with “https://” and end whithout “/”

What could I improve ?

Already tried several attemps. And have been reading doc but no success.

2

Hi there,

Please check the requests response code. If it is a 502 response, it means the response is likely coming from our proxy because of an issue with your service. As the request comes from our proxy, it will be missing the CORS headers, and you will see CORS errors on your front end.

You need to resolve the issue with 502 responses. Check your service logs for errors or if your service has any unhealthy events.

Regards,

Keith
Render Support, UTC+10 :australia:

3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.