How to enable CORS on a Netlify deployment?

Question

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?

Check if [this](https://community.netlify.com/t/access-control-allow-origin-policy/1813) helps — Sami Haddad, Jun 22 '20 at 19:22
@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! — , Jun 22 '20 at 21:35

Sami Haddad · Accepted Answer · 2020-11-17T17:46:32.843

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.

edited Nov 17 '20 at 17:46

answered Jun 23 '20 at 05:38

Sami Haddad

1,356
10
15

score 5 · Answer 2 · answered Mar 26 '22 at 18:09

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

answered Mar 26 '22 at 18:09

Raj Yadav

9,677
6
35
30

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 05 '22 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 05 '22 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 `:splat`in the `from` field like `https://example.com/another-path/:splat` – Adam Tolley Feb 28 '23 at 11:40

score 0 · Answer 3 · answered Mar 12 '23 at 19:32

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;
};

How to enable CORS on a Netlify deployment?

3 Answers3