Access-Control-Allow-Origin Policy

Hi, I’m having the same issue, I’m using Gatsby + DatoCMS

At first this worked for me, but now it is not

[[headers]]
 # Define which paths this specific [[headers]] block will cover.
  for = "/*"
    [headers.values]
    Access-Control-Allow-Origin = "*"

this is the error I’m getting on my branch deploy
Access to fetch at 'https://site-api.datocms.com/docs/site-api-hyperschema.json' from origin 'https://dev.uthru.io' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:8000' that is not equal to the supplied origin. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

and this is toml file

    [build]
      functions = "functions/"

    [[redirects]]
      from = "/app/*"
      to = "/app"
      force = false
      status = 200

    [[headers]]
     # Define which paths this specific [[headers]] block will cover.
      for = "/*"
        [headers.values]
        Access-Control-Allow-Origin = "*"

Hi, @tad1693NS. To troubleshoot this we need to be able to test. What is a URL where we will be able to see this error?

You can post that URL publicly or private message (PM) that to one of our support staff. I’ve confirmed that PMs are enabled for your community login. Note, that only one person can see the PM and this will likely mean a slower reply than posting the information publicly. Please feel free to reply to however you prefer though.

Have you resolved the CORS issue? I’m having exact issue even I have the headers section in my toml file

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.