WebApi2 Cross-Origin Request Blocked from Angular Front End

Question

Angular WebApp:

http://localhost:57729/ 
VS 2017, Core 2.1

API:

http://localhost:3554
VS 2017, .Net 4.6

I am getting into cors issue, have been implementing different solutions and so far no success. No authentication is happening in this case. I have test API controller and it has a get method which is returning OK response.

Directly executing a test http://localhost:3554/MWAPI/Test gives me this result

When I try to run it from Angular web app, I am getting into the following cors issue

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3554/MWAPI/test. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘(null)’).

I have gone through multiple resources and it still isn't working for me.

Enable CORS in Web API 2

https://www.codeproject.com/Articles/617892/Using-CORS-in-ASP-NET-WebAPI-Without-Being-a-Rocke

https://www.infoworld.com/article/3173363/application-development/how-to-enable-cors-on-your-web-api.html

Here is what i have now...

Web.config:

WebApiConfig.cs

public static void Register(HttpConfiguration config)
{
    //url is without the trailing slash
    //var cors = new System.Web.Http.Cors.EnableCorsAttribute("http://localhost:57729", "*", "*");
    var cors = new System.Web.Http.Cors.EnableCorsAttribute(origins: "http://localhost:57729", headers: "*", methods: "*");
    config.EnableCors(cors);

    var constraints = new { httpMethod = new HttpMethodConstraint(HttpMethod.Options) };
    config.Routes.IgnoreRoute("OPTIONS", "*pathInfo", constraints);

    //testing... or remove all formats 
    config.Formatters.XmlFormatter.SupportedMediaTypes.Clear();

    //testing... and add indenting and camel case if we need
    config.Formatters.JsonFormatter.SerializerSettings.Formatting = Newtonsoft.Json.Formatting.Indented;

    // Web API routes
    config.MapHttpAttributeRoutes();

    config.Routes.MapHttpRoute("DefaultApiWithId", "MWAPI/{controller}/{id}", new { id = RouteParameter.Optional }, new { id = @"\d+" });
    config.Routes.MapHttpRoute("DefaultApiWithAction", "MWAPI/{controller}/{action}");
    config.Routes.MapHttpRoute("DefaultApiGet", "MWAPI/{controller}", new { action = "Get" }, new { httpMethod = new HttpMethodConstraint(HttpMethod.Get) });
    config.Routes.MapHttpRoute("DefaultApiPost", "MWAPI/{controller}", new { action = "Post" }, new { httpMethod = new HttpMethodConstraint(HttpMethod.Post) });       
}

Checked API with the following and no issue connecting

Telerik Fiddler
created a quick WinForms application and called the get/post/delete/put methods via HttpClient and async methods. No issue here.

I am missing something else over here and now can't pinpoint. Do you see anything that I may be missing here?

Update 1:

and here is the call from front end

app.component test function

handleSomeTests() {
    let api = "test"

    //standard get,returns HttpStatusCode.OK, "Standard Get executed"
    console.log("===Standard Get===");
    this.dataService.get(api +'').subscribe(
      (res) => {
        console.log(res);
      },
      error => {
        //error.message, error.name, error.ok, error.status, error.statusText, error.url
        console.log(error);
      }
    );
  }

and the data service (not complete yet but doing its basic job)

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams, HttpEvent } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { retry  } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  baseApi: string = 'MWAPI';
  baseUrl: string = 'http://localhost:3554/';
  retries: number = 0;

  constructor(private http: HttpClient) { }

  /**
   * A GET method
   * @param url api url without leading / and MWAPI/ as well
   * @param params pass empty, will cover stuff like ?x=1&y=2, instead use HttpParams  pass as { params: { sessionTimeOut: 'y' } } or const params = new HttpParams().set('q', 'cironunes');
   * @returns returns T string/number/model
   */
  get(url: string, params: any | null = null): Observable {
    url = `${this.baseUrl}${this.baseApi}/${url}`;
    return this.http
      .get(url, { params })
      .pipe(retry(this.retries));
  }

  /**
   * A POST method
   * @param url api url without leading / and MWAPI/ as well
   * @param body model posting
   * @param params pass empty, will cover stuff like ?x=1&y=2, instead use HttpParams  pass as { params: { sessionTimeOut: 'y' } } or const params = new HttpParams().set('q', 'cironunes');
   * @returns returns T string/number/model
   */
  post(url: string, body, params: any | null = null): Observable> {
    url = `${this.baseUrl}${this.baseApi}/${url}`;
    return this.http
      .post(url, body, params)
      .pipe(retry(this.retries));
  }

  /**
   * A PUT method
   * @param url  api url without leading / and MWAPI/ as well
   * @param body model posting
   * @param params pass empty, will cover stuff like ?x=1&y=2, instead use HttpParams  pass as { params: { sessionTimeOut: 'y' } } or const params = new HttpParams().set('q', 'cironunes');
   * @returns returns T string/number/model
   */
  put(url: string, body, params: any | null = null): Observable> {
    url = `${this.baseUrl}${this.baseApi}/${url}`;
    return this.http
      .put(url, body, params)
      .pipe(retry(this.retries));
  }

  /**
   * A DELETE method
   * @param url  api url without leading / and MWAPI/ as well
   */
  delete(url: string): Observable

Vishal Anand · Accepted Answer

Please try removing config.Routes.IgnoreRoute("OPTIONS", "*pathInfo", constraints); and it should work.

WebApi2 Cross-Origin Request Blocked from Angular Front End

Answers (2)

Related Questions