

If the requested resource isn't configured to answer the OPTIONS request method or isn't configured to handle it correctly, then you'll see this error. If the constraints set by the resource are met by the script's request then the browser's access control check will pass, allowing the actual request to proceed. This allows the resource to define the policy that the browser should enforce on all scripts that wish to contact it.

Let's take a look at what's actually going on under the hood of the browser when this occurs.Īs you can see from the sequence diagram, before making the script's actual request to the requested resource, the browser first makes a preflight request for the resource's OPTIONS.

This error occurs when a script on your website/web app attempts to make a request to a resource that isn't configured to accept requests coming from code that doesn't come from the same (sub)domain, thus violating the Same-Origin policy. We've already written an explainer on what CORS headers are and what they do ( which you can find here), but to summarize: CORS is a mechanism for relaxing the "Same-Origin" policy of modern browsers to allow things like serving your static content from and your dynamic content from. In short, the 'access-control-allow-origin' header is a Cross-Origin Resource Sharing (CORS) header. Sure, it tells you that there's a header missing, but from where is it missing, and what should it be? Searching for it on the internet is likely to bring up a popular forum where the most common answer is worse than wrong – it's dangerous. This error is up there as one of the least helpful error messages.
#Response for preflight has invalid http status code 500 how to#
How to Fix "No 'Access-Control-Allow-Origin' Header Present"
