Angular 5 HTTP请求报错：Response for preflight is invalid (redirect)

这个问题我之前也碰到过，本质是Angular和jQuery发送POST请求的默认行为差异触发了不同的CORS处理逻辑，导致了预请求错误。

问题原因分析 #

你看到的Response for preflight is invalid (redirect)错误，是因为浏览器发送了OPTIONS预请求（用于验证服务器是否允许跨域请求），但服务器对这个OPTIONS请求做了重定向，不符合CORS规范。

为什么jQuery的请求能正常工作？

• jQuery的$.post在没有传入请求数据时，默认会设置Content-Type为application/x-www-form-urlencoded，这属于简单请求范畴，浏览器不会发送OPTIONS预请求，直接发送POST请求，服务器能正常处理。

而你的Angular代码问题出在：

• 你给http.post的第二个参数传了空数组[]，Angular的HttpClient会自动把这个数组序列化为JSON，同时设置Content-Type为application/json。这种请求属于非简单请求，浏览器会先发送OPTIONS预请求验证权限，如果服务器没有正确处理OPTIONS请求（比如重定向了它），就会抛出这个错误。

解决方案 #

方案1：修改Angular请求，让它成为简单请求

既然接口不需要传参，你可以把请求体设为null，并手动设置Content-Type为application/x-www-form-urlencoded，这样就不会触发预请求：

import { HttpHeaders } from '@angular/common/http';

// 构建请求头配置
const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/x-www-form-urlencoded'
  })
};

// 发送POST请求，请求体传null
return this.http.post(
  'http://localhost/api-panel/index.php/admin-api-user/check-session',
  null,
  httpOptions
);

如果你的服务器接受空表单数据，也可以传''（空字符串）代替null，效果一致。

方案2：修改服务器端，正确处理OPTIONS预请求

从长远来看，最好让服务器支持OPTIONS预请求，这样以后发送JSON格式的请求也不会有问题。以你的PHP接口为例，需要添加以下逻辑：

if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    // 设置允许跨域的域名，*表示允许所有，也可以指定你的前端域名
    header('Access-Control-Allow-Origin: *');
    // 允许的请求方法
    header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
    // 允许的请求头
    header('Access-Control-Allow-Headers: Content-Type');
    // 返回200状态码，终止后续逻辑
    http_response_code(200);
    exit;
}

这段代码会在收到OPTIONS预请求时，直接返回符合CORS规范的响应，避免重定向。

验证修改 #

修改后重新发送请求，应该就能正常收到响应了。如果还是有问题，可以打开浏览器的Network面板，查看OPTIONS请求的响应状态和头信息，确认服务器是否正确处理了预请求。

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