How do I use the "Debug CORS Errors in Web Applications" prompt?

Copy the prompt template, fill in the variables (ERROR_MESSAGE, FRONTEND_URL, BACKEND_URL, HTTP_METHOD, BROWSER, TECH_STACK, CREDENTIALS_SENT, CUSTOM_HEADERS, CONTENT_TYPE, BACKEND_FRAMEWORK, CURRENT_CORS_CONFIG), and paste it into ChatGPT, Claude, or Gemini.

What AI tools work with this coding prompt?

This prompt works with chatgpt, claude, gemini. Simply copy and paste the template into any of these AI assistants.

Tips for getting the best results?

Always check the browser's Network tab to see both the preflight OPTIONS request and the actual request CORS errors only occur in browsers - test your API directly with tools like Postman to isolate the issue Remember that localhost:3000 and 127.0.0.1:3000 are different origins to browsers For development, consider using a proxy in your build tool instead of relaxing CORS policies When credentials are involved, be very specific with allowed origins - wildcards won't work

coding intermediate

Debug CORS Errors in Web Applications

Fix CORS issues fast with AI assistance. Get step-by-step debugging solutions for cross-origin resource sharing errors in your web apps.

Works with: chatgptclaudegemini

Prompt Template

I'm experiencing a CORS (Cross-Origin Resource Sharing) error in my web application. Please help me debug and resolve this issue systematically. **Error Details:** - Error message: [ERROR_MESSAGE] - Frontend domain/port: [FRONTEND_URL] - Backend API domain/port: [BACKEND_URL] - HTTP method used: [HTTP_METHOD] - Browser: [BROWSER] - Framework/technology stack: [TECH_STACK] **Request Details:** - Are you sending credentials/cookies? [CREDENTIALS_SENT] - Custom headers being sent: [CUSTOM_HEADERS] - Content-Type: [CONTENT_TYPE] **Server Configuration:** - Backend framework: [BACKEND_FRAMEWORK] - Current CORS configuration (if any): [CURRENT_CORS_CONFIG] Please provide: 1. A step-by-step analysis of what's causing this specific CORS error 2. The exact server-side CORS configuration needed for my setup 3. Any client-side code changes required 4. How to test the fix properly 5. Best practices to prevent similar CORS issues in the future 6. Security considerations for the recommended CORS settings Format your response with clear sections and provide code examples for the server configuration.

Variables to Customize

[ERROR_MESSAGE]

The exact CORS error message from browser console

Example: Access to fetch at 'https://api.example.com/users' from origin 'http://localhost:3000' has been blocked by CORS policy

[FRONTEND_URL]

The URL/domain where your frontend is running

Example: http://localhost:3000

[BACKEND_URL]

The URL/domain of your API server

Example: https://api.example.com

[HTTP_METHOD]

The HTTP method used in the request

Example: POST

[BROWSER]

Browser where the error occurs

Example: Chrome 120

[TECH_STACK]

Frontend framework and technologies used

Example: React with Axios

[CREDENTIALS_SENT]

Whether credentials/cookies are being sent

Example: Yes, using withCredentials: true

[CUSTOM_HEADERS]

Any custom headers in the request

Example: Authorization: Bearer token, X-API-Key: abc123

[CONTENT_TYPE]

Content-Type header of the request

Example: application/json

[BACKEND_FRAMEWORK]

Server-side framework or platform

Example: Node.js with Express

[CURRENT_CORS_CONFIG]

Existing CORS setup if any

Example: app.use(cors()) with default settings

Example Output

## CORS Error Analysis Your error indicates a preflight request failure. Since you're sending a POST request with custom headers and credentials from localhost:3000 to api.example.com, the browser is making a preflight OPTIONS request that's being rejected. ## Required Server Configuration ```javascript // Express.js CORS configuration const cors = require('cors'); app.use(cors({ origin: ['http://localhost:3000', 'https://yourdomain.com'], credentials: true, methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'], allowedHeaders: ['Content-Type', 'Authorization', 'X-API-Key'], exposedHeaders: ['X-Total-Count'] })); ``` ## Client-Side Changes Ensure your Axios requests include: ```javascript axios.defaults.withCredentials = true; ``` ## Testing Steps 1. Check Network tab for OPTIONS preflight request 2. Verify response headers include proper Access-Control-* headers 3. Test in incognito mode to rule out cache issues ## Security Notes Never use `origin: '*'` with `credentials: true` as it's a security risk. Always specify exact origins in production.

Pro Tips for Best Results

Always check the browser's Network tab to see both the preflight OPTIONS request and the actual request
CORS errors only occur in browsers - test your API directly with tools like Postman to isolate the issue
Remember that localhost:3000 and 127.0.0.1:3000 are different origins to browsers
For development, consider using a proxy in your build tool instead of relaxing CORS policies
When credentials are involved, be very specific with allowed origins - wildcards won't work