angularjs 和 PHP：预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 Access-Control-Allow-Origin答案

【问题标题】：angularjs and PHP : Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight responseangularjs 和 PHP：预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 Access-Control-Allow-Origin
【发布时间】：2016-05-10 21:40:03
【问题描述】：

我正在尝试从 angularjs 到一个虚拟 php 文件做一个简单的 POST，以了解它是如何工作的。在我的 angularjs 部分：

<html ng-app="loginApp">
  <head>
    <meta charset="utf-8">
    <title>Login</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
    <script>
      var logindata = {username:'abc', password:'abc'}
      var loginApp = angular.module('loginApp', []);
      loginApp.controller('loginCtrl', function ($scope, $http){        
        var request = $http({
            method: "POST",
            url: "http://different-ip/a.php",                    
            data: logindata,
            headers: { 'Content-Type': 'multipart/form-data', 'Authorization': 'Basic ' + btoa(logindata.username + logindata.password), 
            'Access-Control-Allow-Origin': "*"}
        });

        request.success(
            function( data ) {
                $scope.someVariableName = data;
            }
        );
    });
    </script>
  </head>
  <body ng-controller="loginCtrl">
    <h2>Angular.js JSON Fetching Example</h2>
    <p> {{ someVariableName }} </p>
  </body>
</html>

这是我的 PHP 部分 (a.php)，位于 http://different-ip

<?php
  header("Access-Control-Request-Method: *");
  header("Access-Control-Request-Headers: *");
  header("Access-Control-Allow-Origin: *");
  file_put_contents("aa.txt", json_decode(file_get_contents('php://input'),true));
  file_put_contents("aaa.txt", getallheaders());
?>

当我执行我的 angularjs 文件时，chrome 控制台给了我这个错误：

Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.

当我尝试使用 Postman 对此 a.php 进行发布时，一切正常。那么为什么 angularjs 不允许呢？我尝试阅读有关 CORS 的信息，但对于如何解决此问题（代码方面）没有直接的答案。有人可以帮我吗？提前致谢。

【问题讨论】：

尝试检查这 2 个关于 angularjs+CORS 的链接：stackoverflow.com/questions/21455045/… 和 stackoverflow.com/questions/27654135/…

标签： php angularjs cors

【解决方案1】：

在 a.php 的顶部添加这 3 个标题，而不是带有 if 条件的当前标题

<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization");

if($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
   header( "HTTP/1.1 200 OK" );
   exit;
}

file_put_contents("aa.txt", json_decode(file_get_contents('php://input'),true));
file_put_contents("aaa.txt", getallheaders());
?>

您可以在此处查看有关CORS 的更多信息：http://www.w3.org/TR/cors/#access-control-allow-headers-response-header

Postman 之所以有效，是因为它是额外的浏览器扩展，它不关心标头策略并且在请求之前不检查它。

【讨论】：

我试过这个。它仍然给我同样的错误！ :(
@user3193036 我用新的 3 个标题更新了我的答案，你可以重试吗？
现在我得到这个：对预检请求的响应没有通过访问控制检查：请求的资源上没有“Access-Control-Allow-Origin”标头
@user3193036 我再次更新了我的答案，这应该对你有帮助，你可以重试吗？
@user3193036 嗯似乎有一些与您的浏览器+服务器相关的特定问题，从这里我无法理解，您能否在您的问题中包含来自浏览器网络选项卡的request 和@987654328 的屏幕截图@案例？

【解决方案2】：

在我的 PHP 文件中添加了这个而不是当前的标题，现在它可以工作了！感谢@Armen 的帮助！

    if (isset($_SERVER['HTTP_ORIGIN'])) {
        header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
        header('Access-Control-Allow-Credentials: true');
        header('Access-Control-Max-Age: 86400');    // cache for 1 day
    }

    // Access-Control headers are received during OPTIONS requests
    if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {

        if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
            header("Access-Control-Allow-Methods: GET, POST, OPTIONS");         

        if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
            header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");

        exit(0);
    }

【讨论】：

感谢@Armen .. 在您的帮助下，我更深入地挖掘了！ :)