Hey everyone!
I set up an API Gateway that connects to a Lambda function using proxy integration. My Lambda function is set up to handle CORS, and I linked the API Gateway to my React app. Everything was working perfectly until I switched my website to HTTPS. Now, I'm hitting a barrier with this error:
"Access to XMLHttpRequest at '' from origin 'https://localhost:5173' 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."
I've handled CORS in my Lambda function, and the API CDK is configured to allow all origins, yet the issue persists. By the way, Postman has no problem connecting. Any insights?
Thanks!
3 Answers
It sounds like you might need to enable CORS for OPTIONS requests as well, not just for GET, POST, or DELETE. Browsers perform preflight requests that check for CORS headers using an OPTIONS request before proceeding with the actual call, which other tools like Postman don't do. If your API Gateway isn't set up to handle the OPTIONS request correctly, it will throw an error, and the CORS headers will never surface. This is a common pitfall!
Are you passing any credentials with your requests? If so, ensure your backend is correctly returning the 'Origin' header from the request, including the right port for localhost.
Remember that when configuring CORS, the API Gateway needs to handle those OPTIONS requests properly. If you're using HTTP APIs, you can set the CORS response directly on the API. But be careful with the $default ANY route; it might assume that route will take care of it. For REST APIs, you can create a catch-all OPTIONS method at a {proxy+} route to handle preflight checks in one go. It can be confusing!
I'm not using credentials, but yes, the correct origin is being returned.