CORS error with netlify identity

JamesWholebear · April 29, 2020, 5:20am

I copied and pasted the react netlify example from the docs, and when I try and paste my url in, it says "Failed to load settings from "

Console error:
Access to fetch at 'https://<my-site>.netlify.app/.netlify/identity/settings' from origin 'http://localhost:3000' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I’ve noticed a number of people mentioning netlify-cms, I don’t even know what that is. Also not using a git-gateway.

I have no idea why it’d be doing this, it’s worked for another react project in the past.

Dennis · April 30, 2020, 7:43pm

You’re getting that error because your local server has a domain of ‘localhost’, which doesn’t match .netlify.app. Have you tried deploying your code and see if you still get that error?

jozsi · May 8, 2020, 10:59pm

It is actually a bug on Netlify CMS end.

Try using localhost:8888 and it will work. In my case, /.netlify/git/settings was only allowing http://localhost:8888 while /.netlify/identity/settings was allowing any host * (so one of the two worked with port 3000 as well).

LE: it actually appears when the API call times out. Couldn’t fix it with re-linking Git Gateway, yet. (when trying to access it directly at myappname.netlify.app/admin). For my other apps, it works fine.

LLE: works now (regardless of localhost and port number), took some time, uninstall/reinstalled Netlify Github App, relinked the repo, re-enabled the Identity Git Gateway.

erez · May 11, 2020, 7:32am

Thanks @jozsi for reporting the issue and the solution. When working with the CMS locally with identity and git gateway, it should ask for your site URL and store it in local storage, so it knows how to connect to those services. When working with the live site it just uses the current domain. I’ve seen recent cases where it takes some time for git gateway to initialize, but it didn’t result in CORS errors so thank you for informing us. Regardless both git gateway and identity should allow any host (either by mirroring the origin or by sending a *)

jozsi · May 11, 2020, 10:43am

Dear @erez, it’s a pleasure to observe the development of the CMS on GitHub.

I’ve had the site URL set. So basically when the Git gateway was timing out (it was not yet initialized; didn’t get any response for minutes, unlike the Timeout error that happens in some scenaries like when a token re-issue is requested), the CORS prelight request responded instantly without the allowance of * hosts. Unfortunately I didn’t save the response headers and can’t reproduce anymore.

Dennis · May 11, 2020, 5:34pm

That sounds unusual @jozsi. Glad things are working for you now. If you follow @erez’s steps, things should work without issue. If you are able to reproduce the issue again, please do let us know.

jjalonso · January 1, 2021, 2:19pm

@JamesWholebear it look like the guys didn’t reply to you and moved the conversation away. Did you solved the issue ? You will make me so happy if you share the how to.

Thanks.

DaveJha · January 3, 2021, 8:01pm

I’ve tried the above steps numerous times and the issue still persists with the same error.

Are there any other ways to further diagnose the issue? @jjalonso @Dennis

jjalonso · January 4, 2021, 10:31am

To not stop development. I’m just using a chrome extension to allow cors.

jonsully · January 4, 2021, 11:42pm

It sounds like running on port 8888 might’ve been the solution? (This is implying using netlify dev, the CLI command for running and serving your SSG, which defaults to using port 8888)

Dennis · January 5, 2021, 1:12pm

Yea, for the original poster, it does look like the solution was to use port 8888. There was no confirmation from the poster but I assume that since they didn’t come back that it did work.

DaveJha · January 5, 2021, 8:28pm

I’m using Port 8888 and it’s throwing me a page not found error.

I’ve tried using chrome extensions, relinking repo, relinking Netlify app on Github, relinking Netlify Auth. Nothing is working for me, and the same error persists:

“Access to fetch at ‘https://{URL}/.netlify/identity/settings’ from origin ‘http://localhost:8000’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: Redirect is not allowed for a preflight request.”

The strange thing is when I deploy the site, I can access the CMS there. I want to be able to quickly be able to update the CMS without having to deploy to Netlify each time.

Would really appreciate some guidance.

jonsully · January 5, 2021, 9:10pm

Hey @DaveJha

That message would indicate that you’re pointing your browser at localhost:8000 not localhost:8888

Are you using Netlify CLI and running your project with the CLI command netlify dev?

DaveJha · January 5, 2021, 9:17pm

@jonsulty Yes, using netlify dev and then gatsby develop as my subsequent start command.

jonsully · January 5, 2021, 9:48pm

Could elaborate on that a bit? I’m not sure what you mean by subsequent start command - Netlify Dev should fire up Gastby for you, then you’d view the local site on localhost:8888

DaveJha · January 5, 2021, 9:59pm

@jonsully Yes, I have several different start commands after running netlify dev, I choose gatsby/yarn develop which is what initiates. localhost:8888 (the server) starts, but does not let me look at the website (it draws blank). the development build is visible on 8000 as well as the CMS on localhost:8000/admin/#

jonsully · January 6, 2021, 2:11pm

@DaveJha I’d recommend giving this a read -

github.com

netlify/cli/blob/main/docs/netlify-dev.md

## What is Netlify Dev?

<div align="center">
  <h3>Watch the introduction (24 minutes)</h3>
  <a href="https://youtu.be/RL_gtVZ_79Q?t=8">
    <img src="https://i3.ytimg.com/vi/RL_gtVZ_79Q/hqdefault.jpg" height="200" alt="link to netlify dev talk" />
  </a>
</div>

Netlify Dev brings the power of Netlify's Edge Logic layer, [serverless functions](#netlify-functions) and
[add-on ecosystem](#using-add-ons) to your local machine. It runs Netlify's production routing engine in a local dev
server to make all redirects, proxy rules, function routes or add-on routes available locally and injects the correct
environment variables from your site environment, installed add-ons or your netlify.toml file into your build and
function environment.

```
                            ┌───────────────┐
                            │   Project     │
                            │               │
                            └localhost:5000─┘

This file has been truncated. show original

Netlify Dev is made to start your development server for you, not setup such that you should start the development server yourself after you start Netlify Dev. If a blank screen is rendering on localhost:8888, something is wrong.

–
Jon

DaveJha · January 10, 2021, 9:59pm

Hi Jon,

I was able to resolve the issues with netlify dev and now it works as intended. Thank you for sending that resource. I (was) still unable to access the CMS with the same error as before using localhost:8888.

I did some more digging and realized that with the URL changes from earlier this year, I needed to set the URL to be my Netlify URL – not the URL I bought as a separate domain.

So, for anyone else who stumbles on this thread, try the following:

Run localStorage.removeItem(“netlifySiteURL”) in your browser console and refresh to reset the URL
Set the URL to be your Netlify URL and not your domain – should look like site-name.netlify.app

AverageNetlifyBoi · October 23, 2021, 8:20am

Hi, I am running into issue as well:

Access to fetch at 'https://SITE_NAME.netlify.app/.netlify/identity/settings' from origin 'http://localhost:8888' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

I am trying to setup Netlify CMS and run it locally. Deploying it and using it from the netlify.app domain works like a charm. I tried to re-link the repo, re-enable Git Gateway, set headers in netlify.toml but none of these helped. It’s already like 10 hours for me trying to solve the issue and I still can not find the solution.

Using:

https://identity.netlify.com/v1/netlify-identity-widget.js
https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js
Ubuntu Focal 20.04 (default)
netlify-cli/6.7.7 darwin-x64 node-v14.15.5

AverageNetlifyBoi · October 23, 2021, 8:47am

Alright, I finally solved it - this doc says everything about running Netlify CMS locally:

Works perfectly! It was hard to find though