预检响应中的 Access-Control-Allow-Headers 不允许 Angular 2 请求标头字段授权

Posted 2023-03-04

【中文标题】预检响应中的 Access-Control-Allow-Headers 不允许 Angular 2 请求标头字段授权

【英文标题】：Angular 2 Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response

【发布时间】：2017-10-28 00:55:15

【问题描述】：

我正在为我的服务器应用程序使用 codeigniter REST API。客户端作为 Angular2，在我的 REST API 中，我给出了基本的身份验证。我已经设置好了

$config['rest_auth'] = 'basic';

还有

$config['rest_valid_logins'] = ['uname' => 'pwd'];

对于 CORS 检查，我也使用了以下代码，

$config['check_cors'] = TRUE;
$config['allowed_cors_headers'] = [
  'Origin',
  'X-Requested-With',
  'Content-Type',
  'Accept',
  'Access-Control-Request-Method'
];
$config['allowed_cors_methods'] = [
  'GET',
  'POST',
  'OPTIONS',
  'PUT',
  'PATCH',
  'DELETE'
];
$config['allow_any_cors_domain'] = TRUE;

我还尝试在我的休息控制器中明确尝试过，

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type, Content-Range, Content-Disposition, Content-Description');

我在下面的代码中使用了角度，

import  Component, OnInit  from '@angular/core';
import  Http, Headers, RequestOptions   from '@angular/http';
import  FormGroup, AbstractControl, FormBuilder, Validators  from '@angular/forms';
import  Router  from '@angular/router';
import  CommonService, BaseAPIURL  from '../common/common.service';
export class Login implements OnInit 
 private headers: Headers;
  constructor(fb: FormBuilder, private router: Router, private http: Http,
    private commonService: CommonService) 
     this.headers = new Headers();
     this.headers.append('Authorization', 'Basic ' + btoa('uname:pwd'));
     this.headers.append('Content-Type', 'application/json');

  
 ngOnInit() 
  

  public onSubmit(values: Object): void 
    this.submitted = true;
    if (this.form.valid) 
      let options = new RequestOptions( headers: this.headers );
      this.http.post(this.getuserLoginURL, JSON.stringify(values),  options ).subscribe(
        response => 
          let result = response.json();
          this.errorMessage = result.message;
        ,
        error => 
          this.isDisabled = false;console.log(error);
          if (error.status == 400) 
            this.errorMessage = JSON.parse(error._body).message;
           else 
            this.errorMessage = 'Internal server error. please contact admin.';
          
        , () => 
        );
    
  

当我与邮递员核实时，它运行良好，没有任何问题。当检查角度错误时，

XMLHttpRequest cannot load http://localhost:97/sencogold/index.php/Adminaccount_api/login_adminuser. Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.

如果我将其余身份验证设为假并删除授权标头，则无需检查 api 用户名和密码即可正常工作

$config['rest_auth'] = FALSE;

和角度

 this.headers = new Headers();
    //this.headers.append('Authorization', 'Basic ' + btoa('lmxretail:lmx@2017'));
    this.headers.append('Content-Type', 'application/x-www-form-urlencoded');

请帮助任何人为我的 api 应用身份验证。

【问题讨论】：

检查服务器配置。是否允许标头。

将“Access-Control-Allow-origin”插件添加到 chrome 中以解决此问题，但不是永久解决方案。

How to create cross-domain request (Angular 2)?的可能重复

【参考方案1】：

为了使您的预检请求成功，服务器控制器必须接受“授权”标头为有效。您可以通过添加“授权”键以及其他允许的标头值来做到这一点：

Access-Control-Allow-Headers: Authorization, Content-Type, Content-Range, Content-Disposition, Content-Description

【讨论】：

我也试过这样，还是一样的问题。 this.headers.append('Access-Control-Allow-Headers', '授权，内容类型，内容范围，内容 - 处置，内容 - 描述'); this.headers.append('Access-Control-Allow-Methods', 'GET, POST,OPTIONS'); this.headers.append('Access-Control-Allow-Origin', '*');

你在正确的地方做这件事吗？我的意思是你应该在服务器配置上这样做。您的代码看起来像是根据客户端请求执行的。

我已经在我的 rest 控制器头中添加了（“Access-Control-Allow-Headers: Authorization, Content-Type, Content-Range, Content-Disposition, Content-Description"); header('内容类型：应用程序/json'); header("访问控制允许来源：*"); header("访问控制允许方法：GET"); header("Access-Control-Allow-Methods: GET, OPTIONS");

您对预检响应中的“Access-Control-Allow-Headers”有何看法？如果不包含，“授权”肯定需要检查服务器配置。

【参考方案2】：

将Authorization 添加到 CORS 检查：

$config['allowed_cors_headers'] = [
  'Authorization',
  'Origin',
  'X-Requested-With',
  'Content-Type',
  'Accept',
  'Access-Control-Request-Method'
];

【讨论】：

非常感谢，它帮助了我。在 allowed_cors_headers 中添加授权后，它运行良好

【参考方案3】：

在 php codeigniter 后端中，只需将此标头放在您的 api 控制器的construct() 中。 示例：

class ApiController extends CI_Controller 
    function __construct()
        
            parent::__construct();
            header('Access-Control-Allow-Origin: *');
            header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");            
            header("Access-Control-Allow-Headers: Origin,X-Requested-With,Content-Type,Accept,Access-Control-Request-Method,Authorization,Cache-Control");
            header('Content-Type: application/json'); 
    
public function index()
        $MYARRAY = array(1);
        echo json_encode($MYARRAY);