angularjs 和 PHP：预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 Access-Control-Allow-Origin
Posted
技术标签:
【中文标题】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 response 【发布时间】：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 的链接：***.com/questions/21455045/… 和 ***.com/questions/27654135/… 【参考方案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 .. 在您的帮助下，我更深入地挖掘了！ :)以上是关于angularjs 和 PHP：预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 Access-Control-Allow-Origin的主要内容，如果未能解决你的问题，请参考以下文章
预检响应中的 Access-Control-Allow-Methods 不允许方法 PUT
预检响应中的 Access-Control-Allow-Headers 不允许授权