Cors - 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/workaround this.

1. Turn off CORS. For example: how to turn off cors in chrome
2. Use a plugin for your browser
3. Use a proxy such as nginx. example of how to set up
4. 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 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 local host when really you have 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 info....same great taste!

Bypassing CORS is exactly what is shown for those simply learning the front end.
https://codecraft.tv/courses/angular/http/http-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

Preflight request doesn't pass access control check: It does not have HTTP ok status problem and i don't know why, i imported everything right

Preflight requests are not handeled as "normal" request. They have the http OPTIONS header.So after your code snippet where you set the CORS header just add the following lines:

app.options('/*', (_, res) => {
    res.sendStatus(200);
});

This just sets the status to 200 and should fix your problem.

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);
  });

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")

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

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

app.UseCors(MyAllowSpecificOrigins);