Angular 2对预检请求的响应未通过访问控制检查：没有“Access-Control-Allow-Origin”标头答案

【问题标题】：Angular 2 Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' headerAngular 2对预检请求的响应未通过访问控制检查：没有“Access-Control-Allow-Origin”标头
【发布时间】：2018-05-17 17:18:55
【问题描述】：

我是 Angular2 的新手。而且我正在尝试将 POST 方法调用到我的 .net 核心 API。它与 Postman 一起工作正常。但是当我从我的 angular 2 服务调用它时，它给出了一个错误。

这是我的 api.service.ts

import { Injectable } from '@angular/core';
import { environment } from '../../../environments/environment';
import { Headers, Http, Response, URLSearchParams } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

import { JwtService } from './jwt.service';

@Injectable()
export class ApiService {
  constructor(
    private http: Http,
    private jwtService: JwtService
  ) {}

  private setHeaders(): Headers {
    const headersConfig = {
      'Content-Type': 'application/json',
      'Accept': 'application/json', 
      'Access-Control-Allow-Origin': '*'
    };      

    if (this.jwtService.getToken()) {
      headersConfig['Authorization'] = `Token ${this.jwtService.getToken()}`;
    }
    return new Headers(headersConfig);
  }

  post(path: string, body: Object = {}): Observable<any> {
   
    return this.http.post(
      `${environment.api_url}${path}`, 
        JSON.stringify(body),
        { headers: this.setHeaders() }
    )
    .catch(this.formatErrors)
    .map((res: Response) => res.json());
  }

身体值

.net core API 方法

【问题讨论】：

查看服务器端 CORS 实现。 developer.mozilla.org/en-US/docs/Web/HTTP/CORS

标签： angular2-services asp.net-core-webapi

【解决方案1】：

这是一个 CORS 问题。发生这种情况是因为您试图从不同的主机请求资源。您的 API 需要正确回答这些 OPTIONS 请求，否则浏览器将阻止该请求。

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

邮递员中没有实现 CORS 保护，因此您的请求在那里可以正常工作。

编辑：如果您的后端要在生产环境中的同一主机上运行，您还可以使用 webpack / angular cli 的代理支持： https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

【讨论】：

高五 - 同一链接，同一时间

【解决方案2】：

各位，谢谢你们的帮助。我解决了它。正如您所说，发生错误是因为我没有在我的 Web API 中实现 CORS。这篇文章对我有帮助：ASP.NET Core and CORS Gotchas

【讨论】：

【解决方案3】：

仅链接的答案不会帮助人们。以下是解决问题的相关代码：在您的 Startup.cs 文件中，添加这些行。

public void ConfigureServices(IServiceCollection services)
{
   ...
   services.AddCors(o =>
   {
      o.AddPolicy("CorsPolicy", cp => cp.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod().AllowCredentials());
   }
   services.AddMvc()...
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
   ...
   app.UseCors("CorsPolicy");
   app.UseMvc();
   ...
}

【讨论】：