2 Min

Receiving CORS issue from Server-side nginx, react, express and routing-stuff in between brought me to the conclusion that publishing a proper document to troubleshoot CORS-related issues could benefit anyone who’s stuck in this too.

This list is by no means complete. It’s just a guide to help you get a systematic troubleshooting process.

Here are some steps and recommendations to troubleshoot and potentially fix CORS issues

1. Check Nginx Configuration for OPTIONS Requests

Make sure that your Nginx configuration allows OPTIONS requests to pass through to your Node.js server. Since you have proxying set up for /api/, you need to ensure that OPTIONS requests are handled appropriately.

Here’s how you can modify your Nginx configuration to ensure that OPTIONS requests are properly proxied to your Node.js application:

location /api/ {
    proxy_pass http://localhost:5000/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;

    # Allow OPTIONS requests to be handled
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' $http_origin;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
        add_header 'Access-Control-Max-Age' 86400; # 1 day
        return 200;
    }
}

2. Verify Express Server is Listening to OPTIONS

If you have already set up your Express server to handle OPTIONS requests using app.options('*', cors(corsOptions));, make sure the endpoint you are testing (/auth/login) is covered by your CORS configuration as well.

3. Cross-Check Allowed Headers

Double-check the headers you are allowing in your CORS configuration. The allowedHeaders in Express CORS options include 'Content-Type' and 'Authorization'. If your frontend sends any other headers, you need to add those to the allowed list. For example, if you’re sending an X-Requested-With header, include that as well.

const corsOptions = {
  origin: (origin, callback) => {
    if (!origin || allowedOrigins.includes(origin)) {
      callback(null, true);
    } else {
      callback(new Error('Not allowed by CORS'));
    }
  },
  credentials: true,
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
  allowedHeaders: ['Content-Type', 'Authorization', 'X-Requested-With'],
};

4. Test CORS with CURL

To further diagnose the issue, you can test your API endpoint directly using curl:

curl -X OPTIONS https://example.com/auth/login -H "Origin: http://localhost:3000" -i

Look for the Access-Control-Allow-Origin header and any other relevant CORS headers.

5. Review Browser Caching

Sometimes browsers cache CORS preflight results. To ensure you’re testing with fresh headers, clear your browser cache or try the requests in a private/incognito window.

6. Look for Other Middleware

Check for other middleware in your Express application that might be interfering with the CORS handling. Ensure that app.use(cors(corsOptions)); is placed before any route definitions to guarantee it runs first.

Updated:

Similar Content