Axios请求遇CORS预检响应未通过访问控制检查问题求助

报错核心是跨域预检（OPTIONS）请求未通过校验，由3处配置错误共同导致：

• 前端请求头配置错误：Access-Control-Allow-Origin是后端返回给浏览器的响应头，不属于前端请求应该携带的头字段，前端手动添加该字段无任何作用，反而会触发浏览器额外的预检严格校验。
• 后端CORS规则存在规范冲突：同时配置Access-Control-Allow-Origin: *和Access-Control-Allow-Credentials: true违反CORS标准规范——只要开启凭证许可，允许源就不能使用通配符*，必须明确指定具体的前端源地址。
• 后端预检逻辑执行时机过晚：OPTIONS请求的判断逻辑写在了全局头输出、框架加载流程之后，很可能在执行到你写的200返回逻辑前，就被路由、权限中间件、web服务器规则拦截，返回了4xx/5xx状态码，正好对应控制台提示的「预检响应没有HTTP OK状态」错误。同时OPTIONS响应缺失Access-Control-Allow-Methods头，未明确声明允许的请求方法，也会导致预检校验失败。

前端修复 #

删除Axios请求头中多余的Access-Control-Allow-Origin字段，修正后代码如下：

axios({
    method: "POST",
    url: process.env.REACT_APP_API_URL + '/pages/articles',
    headers: { 
        'Content-Type': 'application/json;charset=UTF-8',
        "Accept": "application/json" 
    },
    data: {
        country: localStorage.getItem("locale")
    }
}).then(result => {
    setPosts(result.data.json.articles);
});

*注意：如果后续需要跨域携带Cookie、Authorization认证凭证，再给Axios增加withCredentials: true配置，无相关需求不要添加该字段。

后端修复 #

1. 将CORS处理逻辑整体移动到/config/bootstrap.php文件的最开头，保证在所有框架加载、路由匹配、业务逻辑执行前就处理OPTIONS请求，避免被其他规则拦截。
2. 解决CORS头冲突：如果不需要跨域携带凭证，直接删除Access-Control-Allow-Credentials: true配置；如果需要携带凭证，将Access-Control-Allow-Origin的取值从*改为前端实际源地址https://mysite.fr，同时添加Vary: Origin头避免跨域缓存问题。
3. 补全OPTIONS响应缺失的Access-Control-Allow-Methods头，明确声明允许的请求方法。

修正后的bootstrap.php参考代码（匹配当前无凭证的请求场景）：

// 以下CORS逻辑放到文件最顶部
$allowedOrigin = '*';
// 若需要开启跨域凭证，注释上面的行，启用下面的配置
// $allowedOrigin = 'https://mysite.fr';
header('Access-Control-Allow-Origin: ' . $allowedOrigin);
header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization, X-API-KEY, Access-Control-Request-Method, Access-Control-Request-Headers');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE');
header('Vary: Origin');
// 不需要凭证就删除下面这行
// header("Access-Control-Allow-Credentials: true");

// 优先处理预检请求
if ($_SERVER['REQUEST_METHOD'] === "OPTIONS") {
    header("HTTP/1.1 200 OK");
    exit();
}

// 后续再放原有业务、框架加载逻辑
header('Content-Type: application/json');

*额外排查项：如果修改后仍提示预检状态码错误，检查Nginx/Apache等web服务器的配置，确认没有单独拦截OPTIONS请求、没有返回403/405等错误状态码。

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