Angular 2 中不允许响应预检和请求标头答案

【问题标题】：Reponse Preflight and Request header not allowed in Angular 2Angular 2 中不允许响应预检和请求标头
【发布时间】：2017-02-08 21:23:06
【问题描述】：

我正在使用 Angular 2 从 WCF 服务获取数据。我正在调用返回令牌的登录方法。

为了获取项目数据，我使用 GET 方法，在该请求中，我们需要在标头中传递令牌。

但它给出了错误：

XMLHttpRequest 无法加载 http://192.168.0.149/API/Service1.svc/Datalist。预检响应无效（重定向）。预检响应中的 Access-Control-Allow-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

这是我调用 WCF 服务的 Angular 服务：-

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

我在我的 WCF 服务的 Global.asax 中输入的代码如下：-

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

如果我错了，请帮助我。

【问题讨论】：

您不需要在Access-Control-Allow-Headers 中添加token 吗？喜欢：HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept, token");

标签： wcf angular

【解决方案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();
    }
 }

希望这会有所帮助。

【讨论】：