Reponse Preflight and Request header not allowed in Angular 2 - wcf

Question

I am Working on Angular 2 for getting data from WCF service.
I am calling Login method that returns a token.
For fetching Project Data i am using GET method and in that request we need to pass token in header.
But it gives Error:
XMLHttpRequest cannot load http://192.168.0.149/API/Service1.svc/Datalist. Response for preflight is invalid (redirect). Request header field token is not allowed by Access-Control-Allow-Headers in preflight response.
This are my Headers:-
General:
Request URL:http://pct149/ITM_API/Service1.svc/BHL/Projects
Request Method:OPTIONS
Status Code:200 OK
Remote Address:192.168.0.149:80
Here is my Angular Service in which i am calling WCF Service:-
import {Injectable} from "#angular/core"
import { Http, Response, RequestOptions, Headers } from "#angular/http"
import { Observable } from 'rxjs/Rx';
import {HttpClient } from "#service/http-client";
#Injectable()
export class AppService {
Hero = [];
baseUrl = "http://pct149/ITM_API/Service1.svc/BHL/";
constructor(private _http: Http, private httpClient: HttpClient) {
}
Authentication() {
return this._http.get(this.baseUrl + "Login/harshad.bhola#server1.com/1")
.map((response: Response) => {
let dataToken = response.json();
let Token = dataToken.Token;
if (Token != null & dataToken != null) {
return Token;
}
else {
return '';
}
})
.catch(this.handleError);
}
loadProjects(Token) {
return this._http.get(this.baseUrl + "Projects", { headers: { 'token': Token.trim() } })
.map((responseData: Response) => {
let appData = responseData.json();
console.log(appData);
return appData;
});
}
private handleError(error: Response) {
console.error(error);
return Observable.throw(error.json().error || 'Server error');
}
}
Here is my Component from where i am calling service method:-
import {Component} from "#angular/core";
import { RouterOutlet, RouterLink, RouterModule, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from "#angular/router";
import { HTTP_PROVIDERS, HTTP_BINDINGS } from '#angular/http';
import {AppService } from "#service/app.service";
#Component({
selector: 'app',
templateUrl: 'htmls/app.html',
directives: [ROUTER_DIRECTIVES],
providers: [AppService]
})
export class ProjectListComponent {
Projects = [];
result = '';
constructor(private _appService: AppService) {
this.GetProject();
}
GetProject() {
this._appService.Authentication().subscribe(result => {this._appService.loadProjects(result).subscribe(newProject => this.Projects = newProject); });
}
}
Below Code i put in Global.asax of My WCF Service:-
protected void Application_BeginRequest(object sender, EventArgs e)
{
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
{
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
HttpContext.Current.Response.Flush();
}
}
Please Help me if i am Wrong.

Answer 1

You need to add options to your list of supported methods in your CORS enablement. I'm using webapi 2 so I do this:
from webApiConfig.cs:
var cors = new EnableCorsAttribute("*", "*", "GET,PUT,POST,PATCH,DELETE,OPTIONS");
I also had to trap the preflight request and add the required header:
from global.asax.cs:
protected void Application_BeginRequest()
{
var req = HttpContext.Current.Request;
var res = HttpContext.Current.Response;
var val = res.Headers.GetValues("Access-Control-Allow-Origin");
if (val == null)
{
if (!req.Url.ToString().ToLower().Contains("token") || (req.Url.ToString().ToLower().Contains("token") && req.HttpMethod == "OPTIONS"))
{
res.AppendHeader("Access-Control-Allow-Origin", "http://localhost:4200");
}
}
if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")
{
res.AppendHeader("Access-Control-Allow-Credentials", "true");
res.AppendHeader("Access-Control-Allow-Headers", "Content-Type, X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Date, X-Api-Version, X-File-Name");
res.AppendHeader("Access-Control-Allow-Methods", "POST,GET,PUT,PATCH,DELETE,OPTIONS");
res.StatusCode = 200;
res.End();
}
}
Hope this helps.