WebApi2 Cross-Origin Request Blocked from Angular Front End

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:

 <system.webServer> <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> </customHeaders> </httpProtocol> </system.webServer> 

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

1. Telerik Fiddler
2. 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<any>(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<T>(url: string, params: any | null = null): Observable<T> { url = `${this.baseUrl}${this.baseApi}/${url}`; return this.http .get<T>(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<T>(url: string, body, params: any | null = null): Observable<HttpEvent<T>> { url = `${this.baseUrl}${this.baseApi}/${url}`; return this.http .post<T>(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<T>(url: string, body, params: any | null = null): Observable<HttpEvent<T>> { url = `${this.baseUrl}${this.baseApi}/${url}`; return this.http .put<T>(url, body, params) .pipe(retry(this.retries)); } /** * A DELETE method * @param url api url without leading / and MWAPI/ as well */ delete(url: string): Observable<object> { url = `${this.baseUrl}${this.baseApi}/${url}`; return this.http .delete(url) .pipe(retry(this.retries)); } } 

Update 2:

Full error response

{…}​error: error​​ bubbles: false​​ cancelBubble: false ​​cancelable: false​​ composed: false​​ currentTarget: null ​​defaultPrevented: false ​​eventPhase: 0​​ explicitOriginalTarget: XMLHttpRequest { __zone_symbol__xhrSync: false, __zone_symbol__xhrURL: "http://localhost:3554/MWAPI/test", readyState: 4, … }​​ isTrusted: true​​ lengthComputable: false​​ loaded: 0​​ originalTarget: XMLHttpRequest { __zone_symbol__xhrSync: false, __zone_symbol__xhrURL: "http://localhost:3554/MWAPI/test", readyState: 4, … }​​target: XMLHttpRequest { __zone_symbol__xhrSync: false, __zone_symbol__xhrURL: "http://localhost:3554/MWAPI/test", readyState: 4, … }​​ timeStamp: 88583​​total: 0​​type: "error"​​<prototype>: ProgressEventPrototype { lengthComputable: Getter, loaded: Getter, total: Getter, … } ​headers: Object { normalizedNames: Map(0), lazyUpdate: null, headers: Map(0) } ​message: "Http failure response for (unknown url): 0 Unknown Error" ​name: "HttpErrorResponse" ​ok: false ​status: 0​ statusText: "Unknown Error"​ url: null​ <prototype>: Object { constructor: HttpErrorResponse() } app.component.ts:81:8 

Update 3:

chrome is also showing

Failed to load http://localhost:3554/MWAPI/test: The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed. Origin 'http://localhost:57729' is therefore not allowed access. 

I changed to following, using url instead of * for origins

var cors = new System.Web.Http.Cors.EnableCorsAttribute(origins: "http://localhost:57729", headers: "*", methods: "*") 

and now chrome is showing this error

Failed to load http://localhost:3554/MWAPI/test: The 'Access-Control-Allow-Origin' header contains multiple values 'http://localhost:57729, *', but only one is allowed. Origin 'http://localhost:57729' is therefore not allowed access. 

Where is it not liking the allow origin?

I have also tested by doing following and still the same result.

• only kept the web.config and commented registration code
• commented web.config and kept the registration code

Update 4: Working Solution @VishalAnand comment and chrome helped fix the issue.

1. Removed following from the web.config

   
   

2. Removed constraints from the webapiconfig register method, left only the first two lines.

   var cors = new System.Web.Http.Cors.EnableCorsAttribute(origins: "*", headers: "*", methods: "*"); config.EnableCors(cors); //var constraints = new { httpMethod = new HttpMethodConstraint(HttpMethod.Options) }; //config.Routes.IgnoreRoute("OPTIONS", "*pathInfo", constraints); 

It is working for the get method. I haven't tested put/post/delete, hopefully these will work as well.