Response to Preflight Request Doesn't Pass Access Control Check

Response to preflight request doesn't pass access control check

You are running into CORS issues.

There are several ways to fix or workaround this.

Turn off CORS. For example: How to turn off CORS in Chrome
Use a plugin for your browser
Use a proxy, such as nginx. Example of how to set up
Go through the necessary setup for your server. This is more a factor of the web server you have loaded on your EC2 instance (presuming this is what you mean by "Amazon web service"). For your specific server, you can refer to the enable CORS website.

More verbosely, you are trying to access api.serverurl.com from localhost. This is the exact definition of a cross-domain request.

By either turning it off just to get your work done (OK, but poor security for you if you visit other sites and just kicks the can down the road) or you can use a proxy which makes your browser think all requests come from the local host when really you have a local server that then calls the remote server.

So api.serverurl.com might become localhost:8000/api, and your local nginx or other proxy will send to the correct destination.

Now by popular demand, 100% more CORS information—the same great taste!

Bypassing CORS is exactly what is shown for those simply learning the front end.
HTTP Example with Promises

CORS: response to preflight request doesn't pass access control check - How to solve it on localhost?

You need to set the CORS header on your web server. It is disabled by default for security reasons.

For example, in Nginx, you may do

add_header Access-Control-Allow-Origin example.com;

In case you are using a hosting service that does not allow webserver config modification, you may add the required headers to .htaccess file in your as shown under. In other words, place it in the root of your project where you have your index.html. Also, change the permissions to 644.

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"

References:

https://stackoverflow.com/a/20082724/2777988

https://blog.container-solutions.com/a-guide-to-solving-those-mystifying-cors-issues

CORS issue: Response to preflight request doesn't pass access control check: It does not have HTTP ok status

The headers which you are setting for this request aren't required. In CORS these headers must be set on the server response for browser to allow the response if server has same-origin policy.

I see https://raw.githubusercontent.com allows cross-origin requests, so try making this request without any headers, it should work fine.

fetch(
  "https://raw.githubusercontent.com/simoncriado/Wordle/master/data/db.json"
)
  .then((res) => res.json())
  .then((json) => {
    const letters = json.letters;
    console.log(letters);
  });

CORS: Response to preflight request doesn't pass access control check: It does not have HTTP ok status

The way you implement it, differs from the docs.

With the amount of details you provided it's hard to tell what is wrong, but my best guess is you left out implementing an OPTIONS method on your endpoint causing it to fail the pre-flight.

Best is to just go for the options as described in the docs unless you have a very good reason not to:

builder.Services.AddCors(options =>
{
    options.AddPolicy(name: MyAllowSpecificOrigins,
                      builder =>
                      {
                          builder.WithOrigins("http://example.com",
                                              "http://www.contoso.com");
                      });
});

and

app.UseCors(MyAllowSpecificOrigins);

Has been blocked by CORS policy: Response to preflight request doesn’t pass access control check

I believe this is the simplest example:

header := w.Header()
header.Add("Access-Control-Allow-Origin", "*")
header.Add("Access-Control-Allow-Methods", "DELETE, POST, GET, OPTIONS")
header.Add("Access-Control-Allow-Headers", "Content-Type, Authorization, X-Requested-With")

You can also add a header for Access-Control-Max-Age and of course you can allow any headers and methods that you wish.

Finally you want to respond to the initial request:

if r.Method == "OPTIONS" {
    w.WriteHeader(http.StatusOK)
    return
}

Edit (June 2019): We now use gorilla for this. Their stuff is more actively maintained and they have been doing this for a really long time. Leaving the link to the old one, just in case.

Old Middleware Recommendation below:
Of course it would probably be easier to just use middleware for this. I don't think I've used it, but this one seems to come highly recommended.

Can someone explain the diction in the error: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin'... ?

TL;DR

Is this saying the Microsoft received or sent an XMLHttpRequest?

Microsoft received the request.

Is the originator of the XMLHttpRequest Apple?

Yes.

More details

I'm assuming that the error message in your question is fictitious and that the URL and origins mentioned are there just as an example. You can read the error message as follows:

from origin 'https://apple.com' has been blocked by CORS policy

Understand: Some page on Web origin https://apple.com issued a cross-origin request that failed the CORS check.

Access to XMLHttpRequest at 'https://microsoft.com' (redirected from 'https://apple.com')

Understand: The request was issued to https://apple.com, which resulted in a cross-origin redirect to https://microsoft.com.

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Understand: The cross-origin request to https://microsoft.com was such as to trigger a CORS check, but CORS preflight failed because https://microsoft.com isn't configured to allow Web origin https://apple.com.