18

I'm using Netlify to serve some static .json files. They load fine in the browser but when I try to fetch them via javascript I get the following error in the console:

Access to fetch at (redirected from ) from origin 'http://localhost:3000' has been blocked by CORS policy: 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.

I checked all the options in my site's settings in the Netlify dashboard and don't see any options to enable CORS, how can this be done?

3
  • 2
    Check if this helps Jun 22, 2020 at 19:22
  • 1
    @SamiHaddad Thanks a lot! Saving this /* Access-Control-Allow-Origin: * in a file called _headers (no extension) and putting it at the root next to an index.html (not sure if this bit is needed but I followed the comment) worked. If you want to post that as an answer I'll accept!
    – user967451
    Jun 22, 2020 at 21:35
  • Thanks! Will add one based on your comment. Jun 23, 2020 at 5:37

3 Answers 3

28

Add a file called _headers next to your index.html with the following content:

/*
  Access-Control-Allow-Origin: *

It's better to change it to your actual origin instead of * in production.

5

The better approach is using a proxy like this,

Create a file called netlify.toml in the root directory of the project. (i.e. next to index.html)

[[redirects]]
  from = "/<path-to-access-cors-url>"
  to = "<cross-origin-url>"
  status = 200
  force = true
  headers = {X-From = "Netlify"}
[[headers]]
  for = "/*"
  [headers.values]
    Access-Control-Allow-Origin = "*"

Now use the URL in your HTTP request like this, https://your-domain.com/<path-to-access-cors-url>

Example:

Consider, fakedomain.com is your domain and you want to request resources from https://example.com/patha

[[redirects]]
  from = "/pathx"
  to = "https://example.com/patha"
  status = 200
  force = true
  headers = {X-From = "Netlify"}
[[headers]]
  for = "/*"
  [headers.values]
    Access-Control-Allow-Origin = "*"

Now use the URL in your HTTP request like this, https://fakedomain.com/pathx

3
  • Your example shows to get data from netlify function https://example.com/patha using client https://fakedomain.com/pathx? The toml has to be on the server?
    – Timo
    Oct 5, 2022 at 10:45
  • I want to get data from 2 netlify functions, can you show what to enter in [[redirects]]? Do I have to put each function in a new redirect?
    – Timo
    Oct 5, 2022 at 10:52
  • the toml file should be checked into source control and available on the server. For redirects you can capture the * wildcard in the to field https://example.com/one-path/* and use it as :splatin the from field like https://example.com/another-path/:splat Feb 28 at 11:40
0

I did the same thing as all other suggestions on here but only works when I run it locally. Once it production it fails.

I had to add the headers to the netlify serverless functions as shown below:

exports.handler = async (event, context) => {
  const response = {
    statusCode: 200,
    headers: {
      "Access-Control-Allow-Origin": "https://example.com"
    },
    body: JSON.stringify({ message: "Hello World" })
  };
  return response;
};

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.