Access-Control-Allow-Origin Policy

tad1693NS · January 13, 2021, 5:05pm

Yes I did, eventually, it was a cache problem with DatoCMS

hccsit · January 13, 2021, 6:00pm

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.

tad1693NS · January 13, 2021, 8:19pm

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

Reynalroddy · March 20, 2021, 9:42am

hi…how can i make it sit next to my index.html please??

luke · March 22, 2021, 5:39am

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.

Reynalroddy · March 22, 2021, 12:50pm

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

perry · March 29, 2021, 9:52pm

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.

Reynalroddy · March 30, 2021, 2:21am

Reynalroddy · March 30, 2021, 2:23am

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

perry · March 30, 2021, 6:56pm

hi @Reynalroddy - where is the code from your site- is it just that one index page?

Reynalroddy · March 31, 2021, 6:35am

yes it is a email server i was trying to build with netlify serverless function …my function is located in the functions folder

Reynalroddy · March 31, 2021, 6:39am

this is a link to my project…perhaps you could have a look…GitHub - Reynalroddy/try

Reynalroddy · March 31, 2021, 6:40am

thanks alot for the support perry

perry · April 5, 2021, 8:16pm

hi there, thinks look correct, i think. are you still having problems? do you have a live site to show us?

amosogra · May 8, 2021, 2:41am

How can I enable CORS on my flutter web app on Netlify… please help me. I am new to all these

jen · May 18, 2021, 9:27pm

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

stalliw · May 31, 2021, 4:08pm

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.

perry · June 3, 2021, 4:48pm

hey @stalliw - i am not an expert on CORS, but are you setting the appropriate header?

benleivian · June 3, 2021, 6:52pm

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.

stalliw · June 3, 2021, 11:43pm

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?