Search code examples
corsnetlifywebflow

How to fix CORS issue between webflow and netlify

I have deployed my first netlify site that simply returns a few records from airtable:

https://codefy-airtable.netlify.app/.netlify/functions/courses

it also works with a redirect I set up:-

https://codefy-airtable.netlify.app/api/courses

However, when I add an axios get function to my header script in webflow to test it I get a CORS error:-

“Access to XMLHttpRequest at ‘https://codefy-airtable.netlify.app/.netlify/functions/courses’ from origin ‘https://mgl-community.webflow.io’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.”

mgl-community.webflow.io

Make Give Live | Community This is my function:-

   axios.get('https://codefy-airtable.netlify.app/.netlify/functions/courses')
  .then(function (response) {
    console.log('axios ', response);
  })
  .catch(function (error) {
    console.log('Axios ', error);
  });

This is my github repo https://github.com/jonathanlyon/airtable-temp that shows the _header file with:-

/*
Access-Control-Allow-Origin: *

and the .toml file with:

[[headers]]
for = "/*"
[headers.values]
Access-Control-Allow-Origin = "*"

deploy results

Any idea why I can’t use the json data returned from the URL please?

Thanks

Jonathan

Solution

  • I figured out a way to add headers to my code and now it works. Seems that despite having a _header file and adding headers to the .toml file in Netlify it didn't do the trick.

    In my api return I added headers:-

    module.exports = (statusCode, body) => {
    return {  
        headers: {
          "Access-Control-Allow-Origin": "*"
        },
        statusCode: 200,
        body: JSON.stringify(body)
      };

    };