Reponse不允許在Angular 2中使用預檢和請求標頭

Question

我正在使用Angular 2從WCF服務獲取數據。 我正在調用返回令牌的Login方法。

對於抓取項目數據我使用GET方法，並在該請求中，我們需要在標頭中傳遞令牌。

但它給錯誤：

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.

這是我的頭： -

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 

這裏是我的角度服務，其中我打電話WCF服務： -

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'); 
    } 

}

這裏是從那裏我打電話的服務方法，我的組件： -

 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); }); 
    } 
} 

下面的代碼我把我的Global.asax WCF服務： -

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(); 
     } 
    } 

請幫幫我如果我錯了。

Answer 1

您需要將選項添加到CORS啓用中支持的方法列表中。我使用的WebAPI 2所以我這樣做：

從webApiConfig.cs：

var cors = new EnableCorsAttribute("*", "*", "GET,PUT,POST,PATCH,DELETE,OPTIONS"); 

我也不得不陷阱預檢要求，並添加所需的頭：從的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(); 
    } 
} 

希望這會有所幫助。