CORS：没有'Access-Control-Allow-Origin'标头存在Angular 2答案

【问题标题】：CORS : No 'Access-Control-Allow-Origin' header is present Angular 2CORS：没有'Access-Control-Allow-Origin'标头存在Angular 2
【发布时间】：2016-12-25 04:12:49
【问题描述】：

我正在尝试实现一个进行 PATCH Http 调用的服务，这是我得到此错误“没有 'Access-Control-Allow-Origin' 标头存在”的唯一方法，当我检查开发人员工具时chrome 我看到一个 OPTION 而不是 PATCH，这是我的方法：

pauseTasksJobs(id, task){

//this.headers.append('Access-Control-Allow-Origin', 'application/json');
//this.headers.append('Accept', 'application/json');

  var url = this.home+ "tasks/" +task+ "/jobs/" + id ;
  var body = "{  \" status \"  : \"Pause\" }";
  //var body = "{ status : Pause }";
   console.log("this is my body: "+body) 

   var result;

    this._http.patch(url,body,this.requestOption).
    map(res => res.json())
    .subscribe(res => {
               result = res;
              console.log("this is my result: "+result);
    },  error=> console.error('Error: ' + error),()=>console.log("tasks mis en pause"));
}

在我的构造函数中，我正在像这样设置标题内容：

headers = new Headers();
 requestOption = new RequestOptions({ headers: this.headers });

  private actionV: string;

  constructor(private _http: Http) {
    this.headers.append('Content-Type', 'application/json');
    this.headers.append('Accept', 'application/json');
    this.headers.append('Authorization', 'Basic ' + cookieValue);
  }

【问题讨论】：

你使用哪个后端
如果你指的是哪个服务器：我使用的是 TOMCAT
在你的tomcat配置中，搜索参数值：cors.allowed.methods。它会列出允许的方法，其中有PATCH吗？
是的，它就是其中之一
问题在于您的 cors 预检。它将首先发送一个 OPTIONS 请求，如果成功，它将发送 PATCH 请求。所以 OPTIONS 也需要在 cors.allowed.methods 中。如果这不起作用，请尝试发送标头（现在已注释掉）。您能否提供更多关于如何将标头附加到 this.requestOption 的代码？

标签： http angular cors

【解决方案1】：

首先，在你的补丁请求中添加标题。

像这样：

headers.append('Content-Type', 'application/json');
headers.append('Content-Type', 'Access-Control-Allow-Headers');

别忘了在你的 http 请求中添加标头，像这样：

this.http
    .patch(url, JSON.stringify(payload), { headers: headers })
    ...

其次，在你的 tomcat 配置中，你需要配置：

 <param-name>cors.allowOrigin</param-name>
    <param-value>*</param-value>
</init-param>
<init-param>
 <param-name>cors.supportedMethods</param-name>
    <param-value>GET, POST, OPTIONS, PATCH</param-value>
</init-param>
<init-param>
    <param-name>cors.supportedHeaders</param-name>
    <param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>
</init-param>
<init-param>
    <param-name>cors.supportsCredentials</param-name>
    <param-value>true</param-value>
</init-param>

Angular 在 PATCH 上首先发送 OPTIONS，然后为什么我们需要在 CORS 中允许 OPTIONS。

希望有帮助吗？

【讨论】：

这几乎是我尝试过的，它并没有解决问题，谢谢你的回答
@Anna 好的，你肯定试过女巫'Access-Control-Allow-Headers' ;)
是的，仍然没有得到响应头上的“Access-Control-Allow-Origin”
@Anna 那么它不是角度问题，而是 tomcat 问题。你可以在其他服务器上试试吗？