Error with Axios: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request

[viloriajep]

Hello Guys! I hope you’re well,

First of all sorry for my bad english, i try to make a good explanation,

I have a proyect, in this i use axios to make a POST peticion, to make this peticion i use netlify serverless functions to use the entry endpoint, this endpoint point to supabase.

Well, i use thunder client to check if my endpoint works well, and it is correct.

But my problem surge with i make a axios.post to call my function, this show: “Response to preflight request doesn’t pass access control check: Redirect is not allowed for a preflight request.”

This axios is called with a function in vercel app.

This is my output in my serverless function:

This is my call to suppabase with the POST method, i try to use middy cors to solve it but i dont can.

This is mi axios peticion, i pass a object with the data necsary to process it. i try in this point with:

{ “key”: “Access-Control-Allow-Headers”, “value”: “X-UserSession”, “Access-Control-Allow-Origin”: “*”, “Access-Control-Allow-Methods”: “POST”, “Access-Control-Allow-Headers”: “Content-Type, Authorization” }

But i cant solve it.

This is the error, at this moment the error is changed, now show me this:

Access to XMLHttpRequest at ‘https://illustrious-kataifi-6f58a4.netlify.app/SupabaseTest’ from origin ‘https://dash-job.vercel.app’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Sorry for the answer, i am a new web developer and i have a lot of questions,
Thank you very much for your help.

[hrishikesh]

Any specific reason why you’re using Vercel for frontend and Netlify for serverless stuff? Both the platform provide both these features, so you could remove some of your complications by sticking to any one of these platforms.

[logemann]

I see you are using middy as middleware for your netlify node functions. From there its pretty easy to handle this situation. First of, you can use the cors middleware from middy which injects the correct headers into the response. Take this little snippet here as a starting point:

export const handler = middy(myandler)
   .use(jsonBodyParser())
   .use(cors({
      origin: "*",
      headers: "content-type",
      methods: "POST",
      exposeHeaders: "access-control-allow-origin,access-control-allow-methods,access-control-allow-headers"
   }));

If you also need to handle preflight cors requests which is pretty often the case like with application/json requests, you can handle the OPTION request inside your node function or you can extend the middy cors middleware to also handle the preflight for you, so that you dont need to do it manually in the node function. If you wanna know more on this, i can share a modified middleware.

I just did this patch today and will most likely create a PR so that it gets merged into the main cors middleware from the middy devs.

greetings
marc

[SamO]

Hi @logemann welcome to the forums! Thank you for chiming in with that additional feedback.

[viloriajep]

Hi @logemann, i apeciated a lot your coment, thank you very much,

I make the changes, and a wrapped my serverless funcion with cors from middy, but i still have the same trouble

If i executed this endpoind with thunder client i recive a positive response, but in my deploy site a dont recive the same response, check out:

[viloriajep]

Hi @hrishikesh, thanks a lot for your help!

I make deploy with my front end in netlify, now my front end and my serverless funcions are in the same place, but i keep getting the same error.

Access to XMLHttpRequest at ‘https://illustrious-kataifi-6f58a4.netlify.app/SupabaseTest’ from origin ‘https://imaginative-belekoy-603ebd.netlify.app’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

[viloriajep]

Hi guys! i hope all of us are well,

In this time a bring good news, i can resolve the problem. I show us how i make it.

I set a http method OPTIONS because in my network tab the first method was return it is also i wrap my function with middy cors.

In my axios petition i declare a both of headers

And my last step if make a proxy in my nextjs config, this entry point to my endpoint

I hope this can be of help, thank you a lot for your help!