I am attempting to make a call to an HTTP method implemented with ASP Web API from an Angular 2 client. However, I am encountering the following error:
OPTIONS 401 (Unauthorized)
XMLHttpRequest cannot load . The response to the preflight request does not pass the access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response returned a HTTP status code of 401.
Below is my implementation, which functions correctly when I disable basic authentication on the IIS Server:
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/map'
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Entity } from "app/view-models/entity";
@Injectable()
export class HttpService {
headers;
options;
constructor(private _http: Http) {
this.headers = new Headers();
this.headers.append('Authorization', 'Basic ' + btoa('username:password'));
this.headers.append("Access-Control-Allow-Credentials", "true");
this.headers.append('Content-Type', 'application/x-www-form-urlencoded');
this.options = new RequestOptions();
this.options = new RequestOptions({ headers: new Headers(this.headers) });
}
public Get = (): Observable<Entity> => {
var params = '?key=something';
return this._http.get(environment.apiBaseUrl + environment.getSettings + params
, this.options)
.map(response => <Entity>response.json());
}
}