응답 프리 플라이트 및 요청 헤더가 각도 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.

이 내 헤더입니다 : -

여기

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

}

코드 아래 난 내 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(); 
     } 
    } 

제발 도와주세요

여기에 내가 전화하고 서비스 방법에서 내 구성 요소입니다 내가 틀렸다면.

Answer 1

CORS 사용에서 지원되는 방법 목록에 옵션을 추가해야합니다. webApiConfig.cs에서

: 나는 webapi 2를 사용하고 그래서 나는이 작업을 수행 을 global.asax.cs에서 :

을 나는 또한 트랩 프리 플라이트 요청을했고 필요한 헤더를 추가

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

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

희망이 도움이됩니다.