拒绝设置不安全的标头“Access-Control-Request-Headers”Angular 4答案

【问题标题】：Refused to set unsafe header "Access-Control-Request-Headers" Angular 4拒绝设置不安全的标头“Access-Control-Request-Headers”Angular 4
【发布时间】：2018-10-26 03:37:31
【问题描述】：

我的控制台出现下一个错误：

拒绝设置不安全的标头“Access-Control-Request-Headers”。

我有下一个代码：

     import { Component } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from '@angular/http';
import { getLocaleDateFormat } from '@angular/common';
// import 'rxjs/Rx';
 // import 'rxjs/add/operator/map';
import { map } from "rxjs/operators";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!!';
  private apiUrl = 'http://testserver:8083/feedback_api/2/token';
  data: any = {};

  constructor(private http: Http) {
    console.log('TEST');
    this.getContact();
    this.getData();
  }


  getData() {
        // add authorization header with jwt token
        let headers = new Headers({ 'Access-Control-Request-Headers': 'Authorization' });
     //   headers.append('Access-Control-Request-Headers', 'Authorization');
        headers.append('Access-Control-Allow-Origin', '*');
        // headers.append('Access-Control-Allow-Headers', 'Content-Type');
        headers.append('Authorization', 'Basic exampletokenexampletokenexampletoken');
        // 'Authorization': 'Basic exampletokenexampletokenexampletoken'
        headers.append("Content-Type", "application/x-www-form-urlencoded");
        //headers.append('Content-Type', 'application/json');
        //headers.append('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');

        let options = new RequestOptions({ headers: headers });

        console.log(headers);

        // get users from api
        return this.http.get(this.apiUrl, options)
            .pipe(map((response: Response) => response.json()));
    }
  getContact() {
   this.getData().subscribe(data => {
  console.log(data);
  this.data = data
})


  }
}

当我使用 Postman 并通过 api 向服务器发送请求时，我收到了 json 响应返回 => 在标头中我正在发送一个键：“Autorization”和值：“tokenexample”。我的应用程序在本地主机上运行。你能帮我解决这个问题吗？

【问题讨论】：

所有的 access-... 标头都应该设置在服务器端
Postman 处理请求为什么会不一样？
了解浏览器实现的CORS（但不包括REST cients，例如邮递员）
'ERROR service_base_v1.createErrorResponse: Error: Missing Authorization header at velocity_core/forms/rest_base/isAllowed:16 (isAllowed)' 这是我在服务器日志中读到的内容。
您需要设置Authorization 标头客户端。需要设置服务器端的是Access-...标头

标签： angular api

【解决方案1】：

在客户端，只需设置以下内容就足够了：

    // add authorization header with jwt token
    let headers = new Headers({ 'Authorization', 
            'Basic exampletokenexampletokenexampletoken' });

    let options = new RequestOptions({ headers: headers });

这告诉服务器你的授权。

在服务器端，您应该设置 CORS 标头：'Access-Control-Allow-Origin:*' 'Access-Control-Request-Headers': 'Authorization' 你应该只在服务器端设置，如果不是由框架或网络服务器配置完成。

对于开发，您可以在没有服务器端标头的情况下工作。如果您使用 Chrome，它会在地址字段的右侧显示一个小图标。如果您点击它，您可以在页面上允许不安全的内容。

解释它为什么在 Postman 中起作用： Postman 忽略来自服务器端的 Access-Control-Allow-Origin 标头。这是一个浏览器安全功能（就像 David 解释的那样）。

【讨论】：