How to Enable CORS on Your Backend API for React Frontends

How to Enable CORS on Your Backend API for React Frontends

When you control the backend API that your React app calls, enabling CORS correctly is your responsibility. Here is how to do it securely.

Use a CORS Middleware

Most backend frameworks have a CORS middleware. Use it instead of manually setting headers, because it handles preflight requests and edge cases correctly.

Allow Specific Origins

Do not use a wildcard in production. Explicitly list the origins that should be allowed, like your frontend domain. A wildcard with credentials is a security risk.

Handle Preflight Requests

For non-simple requests, the browser sends an OPTIONS preflight. Your server must respond to OPTIONS with the right headers, or the actual request never fires. CORS middleware handles this for you.

Allow the Right Methods and Headers

Specify which methods and headers your API allows. Common ones are GET, POST, PUT, DELETE, and headers like Content-Type and Authorization.

Be Careful With Credentials

If your frontend sends cookies or auth headers, set Access-Control-Allow-Credentials to true, and do not use a wildcard origin. Specify exact origins instead.

Test From Your Frontend

After configuring, test from your actual React app, not just Postman. Postman does not enforce CORS, so it cannot confirm your configuration works for the browser.

The Takeaway

Use CORS middleware, allow specific origins, handle preflight, allow the right methods and headers, and be careful with credentials. Test from the browser, not just Postman, to confirm.