Block by CORS Policy althouht is setup in the Web API

Question

Im running ASP.NET Core Angular app, I added a Api Controller in the Core app and Im trying to make a api call from the Angular app, the Core app is hosted on 58181 and the Angular app on 44337, when I try to call the Api from the Angular a get

Access to XMLHttpRequest at 'http://localhost:58181/api/authenticate/login' from origin 'https://localhost:44337' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

I configue Cors in the API

   services.AddCors(options =>
            {
                options.AddPolicy("CorsPolicy", policy =>
                {
                    policy.AllowAnyOrigin()
                        .AllowAnyHeader()
                        .AllowAnyMethod();
                });
            });

  app.UseCors("CorsPolicy");

Im trying to call the API like this

 register() {
    var body = {
      UserName: this.formModel.value.UserName,
      Email: this.formModel.value.Email,
      FullName: this.formModel.value.FullName,
      Password: this.formModel.value.Passwords.Password
    };
    return this.http.post(this.BaseURI + '/authenticate/register', body, {
      headers: new HttpHeaders({ 
      'Access-Control-Allow-Origin':'*',
      'Content-Type': 'application/json',
      'Authorization':'authkey',
      'userid':'1'
    })});
  }

What I expect is to call my authentication controller and login/register my user, both Angular app and Apis will be on the same localhost, on different ports.

You don't really need to set the `Content-Type` header is you are using `HttpClient`. Also, the `Access-Control-Allow-Origin` is a response header from the Options call made for a cross-origin request. So you don't need to set that in your request headers as well. — ashish.gd, May 08 '19 at 16:45
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSExternalRedirectNotAllowed — Jota.Toledo, May 08 '19 at 18:14
Angular apps run in the browser, they don't have a port. I am a little confused how you have two different ports. Are you using `angular-cli` and proxying your requests with `ng-serve` and `proxy-conf`? Do you have two core apps? — Pace, May 08 '19 at 21:27

score 0 · Answer 1 · answered May 09 '19 at 04:23

Your code should be like this. Make sure the middleware are in correct order

 services.AddCors();
 services.AddMvc();

 app.UseCors(builder => builder
                .AllowAnyOrigin()
                .AllowAnyMethod()
                .AllowAnyHeader()
                .AllowCredentials());
 app.UseMvc();

score 0 · Answer 2 · answered May 09 '19 at 04:34

In order to enable the CORS, below is the code:

In web project, I added a crossdomain.xml file at the root location that holds the content

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
    <!-- Read this: www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html -->

    <!-- Most restrictive policy: -->
    <site-control permitted-cross-domain-policies="none"/>
</cross-domain-policy>

In web project configuration file web.config, add a tag:

<location path="crossdomain.xml">
    <system.webServer>
      <staticContent>
        <clear />
        <mimeMap fileExtension=".xml" mimeType="text/x-cross-domain-policy" />
      </staticContent>
    </system.webServer>
  </location>

Another change is in the WEB API side under configuration file: AngularJS Allow-Origin to WebApi2

Thanks

Block by CORS Policy althouht is setup in the Web API

2 Answers2