Response Type Not Allowed

The “Response Type Not Allowed” error in CORS usually occurs when the server does not properly set the Access-Control-Allow-Headers or Access-Control-Allow-Methods, or when the response type (e.g., JSON, text, etc.) is not properly handled.

🔍 Common Causes & Fixes

1. Ensure Correct Response Headers in the Backend

Your server must explicitly allow certain headers in the response. Update your CORS middleware:

app.use(cors({
  origin: '*', // Or specify allowed origins like 'http://localhost:3000'
  methods: ['GET', 'POST', 'OPTIONS'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  exposedHeaders: ['Content-Type', 'Authorization'], // Expose necessary headers
  credentials: true
}));

👉 Fix: Add exposedHeaders if your frontend expects certain headers.

2. Ensure the Server is Returning the Expected Content-Type

If your server sends an invalid content type, browsers might block it. Update your response handling:

res.setHeader('Content-Type', 'application/json');
res.json({ responseHeaders, responseBody });

👉 Fix: Ensure the response type matches the expected format.

3. Handle Preflight (OPTIONS Request) Properly

Some browsers send a preflight OPTIONS request before making the actual request. Your server must handle it:

app.options('*', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.sendStatus(204);
});

👉 Fix: Make sure your server correctly handles OPTIONS requests.

4. Verify the Frontend Request Format

Ensure your fetch request in the frontend specifies the correct Accept and Content-Type headers:

fetch('http://localhost:3001/cors/validator', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  },
  body: JSON.stringify(payload)
});

👉 Fix: The Accept header should match what the server responds with.

5. Restart the Server & Clear Cache

After making these changes:

• Restart your backend server to apply the updates.
• Clear browser cache or test in Incognito mode.

Conclusion

The Response Type Not Allowed error occurs when the server does not permit the requested content type in CORS responses. To resolve this, ensure that the server includes the Access-Control-Allow-Headers header with the required content type and properly handles Access-Control-Allow-Origin to allow cross-origin requests.