Getting this error: has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No

[dmc103janssen]

PLEASE help us help you by writing a good post!

• We need to know your netlify site name. Example: https://pawstagramappp.netlify.app
• Did you try Ask Netlify, our generative AI chatbot, before posting? Yes

Hi, after deployment. I get this CORS error:

login:1 Access to XMLHttpRequest at ‘https://pawstagramapp.adaptable.app/auth/register’ from origin ‘https://main--pawstagramappp.netlify.app’ 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.

not sure why it’s blocked and how to address it…

Appreciate you help!

[hrishikesh]

[Support Guide] Handling CORS on Netlify

CORS stands for Cross Origin Resource Sharing. It is a HTTP header that tells the browsers how to handle a request from a certain origin to for an asset on your website. You can read more about it on Cross-Origin Resource Sharing (CORS) - HTTP | MDN (mozilla.org). By definition, an origin consists of scheme, domain and port. For example: https://www.example.com/ https:// is the scheme www.example.com is the domain 443 is the port (HTTPS is served on port 443 by default). Any difference in t…

[dmc103janssen]

thanks, but both frontend and backed are using the same protocols. Do I need to modify anything from backend? it looks like it is not accepting the request, not sure though.

[hrishikesh]

That guide documents every possible type of error (at least the ones we have seen so far), including the type you’re facing. Please refer to it carefully and apply the fix relevant to your case.

[dmc103janssen]

will do as advised, thank you!

[hrishikesh]

If you need further clues, you should be looking for help in:

@hrishikesh

2. Where to fix it?

Often times you’d think this is a Netlify issue because the error appears on your Netlify site. But, in a lot of cases, the issue is not on Netlify’s end. It’s important to understand that CORS needs to be configured on the server that’s serving the request. So if Netlify is not the server that’s serving the address you’re requesting, this is something you need to fix on the server serving the request. However, you can still fix this from Netlify’s end, as discussed further in this guide.

and

@hrishikesh

3.1: Assets not hosted on Netlify:

Continuing the discussion from point 2 above, where you have assets and APIs hosted on a different server than your Netlify-hosted frontend, you can solve such issues by using Netlify Rewrites . Please note, this method should only be used when you don’t control the other server or cannot add CORS headers there. If you can, the real solution would be to add the correct headers there.

Consider this situation:

• You have a Netlify-hosted site.
• That site is trying to connect to an API or an asset hosted on https://www.example.com/ which is not hosted by Netlify.

If this situation matches yours, you can add a netlify.toml in your project with the following data:

[[redirects]]
  force = true
  from = "/scripts/x.js"
  status = 200
  to = "https://www.example.com/scripts/x.js"

Now, in your frontend, you can make a request like: /scripts/x.js and Netlify will proxy that to https://www.example.com/scripts/x.js and return the response. Note that, the exact redirect that you’d need to setup would differ based on your requirement. Please refer to Netlify Rewrites documentation on various options and ways you can send such a request.

The reason this works to handle CORS is because, when you make a request like /external/api/, browsers treat it as a same-origin request and allow it.