Question

我在控制台中收到下一个错误：

拒绝设置不安全标头“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回复=＆gt;在标题中我发送了一个密钥：“Autorization”和值：“tokenexample”。我的应用程序在localhost上运行。你能帮帮我吗？

Answer 1

在客户端，只需设置以下内容即可：

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

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

这告诉服务器您的授权。

在服务器端，您应该设置CORS标头：＆＃39; Access-Control-Allow-Origin：*＆＃39; ＆＃39;访问控制 - 请求 - 标题＆＃39;：＆＃39;授权＆＃39;如果不是由框架或Web服务器配置完成，则只应在服务器端设置。

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

解释它在Postman中的工作原理：Postman忽略了服务器端的Access-Control-Allow-Origin标头。这是一个浏览器安全功能（像David解释的那样）。

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

1 个答案: