# How to Debug CORS Errors in JavaScript

DevFeed: [How to Debug CORS Errors in JavaScript](<https://devfeed.tech/articles/how-to-debug-any-cors-error-19064.md>)

Original publisher: [Read original article](<https://httptoolkit.com/blog/how-to-debug-cors-errors/>)

Author: HTTP Toolkit; Tim Perry

Published: 2020-10-07T14:30:00Z

Content type: tutorial

Language: en

Sources: [HTTP Toolkit](<https://devfeed.tech/sources/http-toolkit.md>)

Topics: [Cross-origin resource sharing (CORS)](<https://devfeed.tech/topics/cors.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [browser](<https://devfeed.tech/topics/browser.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [browser](<https://devfeed.tech/tags/browser.md>), [cors](<https://devfeed.tech/tags/cors.md>), [debug](<https://devfeed.tech/tags/debug.md>), [debugging](<https://devfeed.tech/tags/debugging.md>), [errors](<https://devfeed.tech/tags/errors.md>), [fetch](<https://devfeed.tech/tags/fetch.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [javascript](<https://devfeed.tech/tags/javascript.md>)

## AI overview

This tutorial explains how to recognize and debug CORS errors in JavaScript. It describes browser same-origin protections, common preflight and response-header errors, and the security risks CORS helps prevent.

## Source excerpt

Your request is hitting an error due to CORS. Not all is lost! Most CORS errors are quick & easy to debug and fix, once you understand the basics. Let's sort it out. You know you're hitting a CORS error when you see error messages like: Access to fetch at 'https://example.com' from origin 'http://localhost:8000' has been blocked by CORS policy. No 'Access-Control-Allow-Origin' header is present on the requested resource Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://example.com/ Response to preflight request doesn't pass access control check The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include' Method PUT is not allowed by Access-Control-Allow-Methods in preflight response. Request header field custom is not allowed by Access-Control-Allow-Headers in preflight response. In each of these cases, you've asked JavaScript running in your page to send a request to a different origin, and at some stage the browser is refusing to do what you want. What is CORS? When you include JavaScript in a web page, you're running code on your user's computer, inside their browsing session. That's a lot of power, and browsers are designed to protect users from the risks of this. CORS is one of these protections, aiming to protect the user and the services they use from two main attacks: CORS stops you from using the user's existing login session (their cookies and other cached authentication details) when communicating with other servers. JavaScript on your web page shouldn't be able to send requests to the Facebook API using their existing Facebook session. Without CORS, any web page could talk to other servers as you. CORS stops you from talking to servers that might only be accessible from their machine, but which aren't accessible publicly. Your web page should not be able to send requests to my-intranet-server.local, which might be an