Yes I did, eventually, it was a cache problem with DatoCMS
Here is my toml file
[build] publish = "site" functions = "lambda" Command = "npm run build:lambda" [[headers]] for = "/*" [headers.values] Access-Control-Allow-Origin = "*"
but I’m still running into CORS error:
reimburse:1 Access to XMLHttpRequest at ‘https://peaceful-****.netlify.app/.netlify/functions/uploadFiles’ from origin ‘http://localhost:8080’ 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.
This is something related to your functions, not the application. “The preflight request” is like verification a request make to the server to see if they have access to a particular resource (in this case your function https://peaceful-****.netlify.app/.netlify/functions/uploadFiles)
When you try to access your functions on your local machine it will go on CORS since both resources are in different locations, you need to add additional Headers to your response so it can communicate effectively with your application. You can read more about it here
Here is a snip of what I did on my functions to solve the problem
let HEADERS = {
'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept, Access-Control-Allow-Origin',
'Content-Type': 'application/json', //optional
'Access-Control-Allow-Methods': 'POST, OPTIONS',
'Access-Control-Max-Age': '8640'
}
//This solves the "No ‘Access-Control-Allow-Origin’ header is present on the requested resource."
HEADERS['Access-Control-Allow-Origin'] = '*'
HEADERS['Vary'] = 'Origin'
exports.handler = async function (event, context) {
try {
if (event.httpMethod === 'OPTIONS') {
return { statusCode: '204', HEADERS }
}
if (event.httpMethod === 'POST') {
const body = JSON.parse(event.body)
//Your code goes here
return {
statusCode: 200,
body: 'Success',
HEADERS
}
}
return {
statusCode: 401,
HEADERS
}
} catch (e) {
console.error(e)
return {
statusCode: 500,
body: e.toString()
}
}
}
Here is a list of good resources that can help you understand better:
If you want to test your functions on your local machine I suggest using Netlify Dev. It will create a local server for you to run your functions
2 Likes
hi…how can i make it sit next to my index.html please??
Hi, @Reynalroddy. You just move or copy that file to the required location. You can either do that in your repo or you can manually copy or move the file as part of your build command.
hi thanks for your response luke, if I got what the other engineer says, he means I open a new file inside my repo buy the fie should be placed immediately after the index file…how to do that is what I don’t understand…sorry I’m really new to all this
hey @Reynalroddy , can you please explain in a different way what you are trying to do, please?
maybe a screenshot of your current project structure would be helpful for us.
this is my folder-structure…so how do i make sure the .toml file is directly placed under my index to solve the cors issue
hi @Reynalroddy - where is the code from your site- is it just that one index page?
yes it is a email server i was trying to build with netlify serverless function …my function is located in the functions folder
this is a link to my project…perhaps you could have a look…GitHub - Reynalroddy/try
thanks alot for the support perry
hi there, thinks look correct, i think. are you still having problems? do you have a live site to show us?
How can I enable CORS on my flutter web app on Netlify… please help me. I am new to all these
Hey there,
What have you tried so far? Once you tell us, we can help debug. A bit further up this thread, there’s some great advice that’s worth a try if you haven’t dug in yet: Access-Control-Allow-Origin Policy - #23 by tad1693NS
Hi All.
I’m having issues accessing the Square payments Api through my client-side Netlify browser. Even though Netlify has HTTPS & Square Api requires Https to access their Api, I still get the following error:
Any thoughts? I have a in index.html referencing “https://sandbox.web.squarecdn.com/v1/square.js”. It loads successfully. My program is written in a way that a button press will call the payments Api. When I click the button, that’s when I get the error.
hey @stalliw - i am not an expert on CORS, but are you setting the appropriate header?
Thanks all, this thread helped me get a Netlify function running with the correct headers.
It’s worth sharing that I was running into a Missing Allow Origin error that sent me down a CORS rabbit hole. What I later realized is that I had a syntax error when making the request 
. Don’t be like me and inspect your response for detailed error messages.
1 Like
Thanks for the response @perry. I am not explicitly setting the headers. I’m not sure how or where to do that. Should that be done in one of my .js files or in my Netlify acct?