添加Authorization头后AngularJS向PHP传$_POST失败且请求变OPTIONS

我来帮你拆解并解决这个问题，这其实是跨域场景下的预检请求处理+参数解析的双重问题：

1. 为什么请求变成了OPTIONS？ #

当你给请求加上自定义的Authorization头后，浏览器会触发CORS预检请求（也就是OPTIONS请求）——这是浏览器的安全机制，用来提前确认后端服务器是否允许这种带自定义头的跨域请求。只有服务器正确响应OPTIONS请求后，浏览器才会发送真正的POST请求。

2. 具体解决步骤 #

步骤一：后端PHP处理OPTIONS预检请求 #

在你的PHP接口入口文件最顶部添加这段代码，专门处理OPTIONS请求并返回合规的CORS响应头：

// 处理OPTIONS预检请求
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    // 允许的前端域名，根据你的实际项目调整，也可以用*允许所有（生产环境不建议）
    header('Access-Control-Allow-Origin: http://your-frontend-domain.com');
    // 必须包含你用到的自定义头和Content-Type
    header('Access-Control-Allow-Headers: Content-Type, Authorization');
    // 允许的请求方法
    header('Access-Control-Allow-Methods: POST, OPTIONS');
    // 设置预检请求的缓存时长，减少重复OPTIONS请求
    header('Access-Control-Max-Age: 86400');
    exit;
}

// 给正常POST请求也加上CORS头
header('Access-Control-Allow-Origin: http://your-frontend-domain.com');
header('Access-Control-Allow-Headers: Content-Type, Authorization');

步骤二：确保正确接收POST参数 #

跨域场景下，有时候$_POST全局变量会因为自定义头的存在无法正确解析参数，你可以改用php://input来获取原始请求体并解析：

// 替换原来直接用$_POST的方式
$rawPostData = file_get_contents('php://input');
parse_str($rawPostData, $requestParams);

$project = $requestParams['project'];
$username = $requestParams['username'];
$password = $requestParams['password'];

步骤三：AngularJS请求的小优化 #

可以给全局Authorization头加个判断，避免localStorage中没有token时发送空的Bearer头：

.run(['$http', function($http) {
    const token = localStorage.getItem('tokenAPI');
    if (token) {
        $http.defaults.headers.common['Authorization'] = 'Bearer ' + token;
    }
}])

3. 验证方式 #

1. 打开浏览器开发者工具的Network面板，先看OPTIONS请求是否返回200状态码
2. 再检查真正的POST请求是否正常发送，请求体里的参数是否存在
3. 后端可以用var_dump($requestParams)或者var_dump(file_get_contents('php://input'))调试，确认参数是否被正确接收

内容的提问来源于stack exchange，提问作者TotoNaBendo