返信プリフライトとリクエストヘッダーは角2で使用できません

Question

私はWCFサービスからデータを取得するために角度2で作業しています。 トークンを返す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.

これは私のヘッダです： - ：

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

- ここ

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サービスを呼び出す午前いる私の角度サービスです

}

コードの下に、私は私のWCFサービスのGlobal.asaxの中に入れ

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

： - - ：

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

私を助けてください

は、ここで私が呼び出していserviceメソッドから私のコンポーネントであります私が間違っているならば。

Answer 1

CORSイネーブルメントでサポートされるメソッドのリストにオプションを追加する必要があります。 webApiConfig.csから

：私はので、私はこれを行うWEBAPI 2を使用してい

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

これが役に立ちます。