Search code examples
reactjsaxioscorsnetlifynetlify-function

CORS problem with netlify APP (API URL endpoint)

I just deployed my APP in netlify and it was working fine in development, I'm using netlify functions with faunadb, and when I run locally it all works. To make it work in production I just updated the API endpoint. To run locally I was using "http://localhost:8888/api/", and in production I changed to the URL provided by netlify. In production the App doesn't work, I get a CORS error like the image below, it occurs at the login section, when authenticating the user.

I've already tried adding the headers configuration in the response of netlify function (image) and in netlify.toml file, but didn't work either. How can I configure this properly?

Axios instance with the URL (netlify URL + "/api/", as my /.netlify/functions/:splat in netlify.toml):enter image description here

Function that calls netlify function: enter image description here

netlify function (return part): enter image description here

error that I’m getting: enter image description here

Solution

  • Looks like you misspelt Access-Control-Allow-Origin.

    In any event, the CORS headers need to be returned from the server, not sent by the client. It should be returned as a response to a pre-flight (OPTIONS) request at the same URL.

    You can find an example of how to do this, if your API is using ExpressJS here.