Cors issue for serverless function


I know there are a lot of similar posts regarding this topic but none of the other solutions have worked for me.

I am attempting to create at serverless fucntion that is available from any domain.

My netlify.toml file looks like this:

command = 'npm run build'
functions = 'functions'
publish = 'build'

  from = "/api/*"
  to = "/.netlify/functions/:splat"
  status = 200

  for = "/*"
    Access-Control-Allow-Origin = "*"
    Access-Control-Allow-Headers = "Origin, X-Requested-With, Content-Type, Accept"
    Access-Control-Allow-Methods = "OPTIONS, POST, GET, PUT, DELETE"

When ever I make a call to this api, I get this error:

Access to fetch at '' from origin 'http://localhost:3000' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

However, when I use a service like CORS anywhere then it works no problem.

Thanks for any help.

You need to return the CORS headers from your functions, not netlify.toml.