Theo's Typesafe Cult•3y ago

Adding Headers Breaks COR's with Next.js

Having a weird issue. I want to post to my API route cross-origin, so I added this to my next.config.js: https://vercel.com/guides/how-to-enable-cors When I make my post request from the browser like this I get a CORs error:

const emailOptions = {
  method: 'POST',
  headers: {"content-type": "application/json"},
  body: {"email":email}
}
fetch(`https://6790eb931u2y2y.ngrok.io/api/mail/add-to-list/`, emailOptions).then(/*...*/)

const emailOptions = {
  method: 'POST',
  headers: {"content-type": "application/json"},
  body: {"email":email}
}
fetch(`https://6790eb931u2y2y.ngrok.io/api/mail/add-to-list/`, emailOptions).then(/*...*/)

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://6790eb931271.ngrok.io/api/mail/add-to-list/. (Reason: CORS preflight response did not succeed). Status code: 405.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://6790eb931271.ngrok.io/api/mail/add-to-list/. (Reason: CORS preflight response did not succeed). Status code: 405.

But when I remove the "content-type" header it works. What the heck is going on?

2 Replies

Develliot•3y ago

I just noticed you said it was working without headers So it's not a domain thing Do you need Accept: "application/json" content-type looks like it was enabled in the vercel example if you copied that, that is weird.

benten•3y ago

Might need the Accept header, will test it soon

Gaming

Programming

Adding Headers Breaks COR's with Next.js