React与PHP跨域配置全解析

XAMPP环境下React与PHP项目所谓的“跨域问题”其实是个普遍误解——根本原因并非浏览器CORS机制作祟，而是Apache未启用mod_headers模块、PHP响应头未在输出前正确发送，或前后端路径配置错误所致；只要确保mod_headers已加载、虚拟主机Directory块中明确设置CORS头、PHP脚本开头严格处理OPTIONS预检并精准输出header（避免BOM/空格/提前输出），再将PHP接口置于htdocs可执行目录、React请求改用绝对路径，即可彻底告别“No 'Access-Control-Allow-Origin' header”报错——所谓跨域，90%是配置失当的假象。

直接说结论：XAMPP 下 React + PHP 项目根本不需要“跨域”，只要路径和响应头配置对了，就不存在浏览器报 No 'Access-Control-Allow-Origin' header 的问题——你看到的所谓“跨域错误”，90% 是因为 Apache 没启用 mod_headers，或 PHP 响应头没在输出前发送，或前端请求发到了错误路径。

Apache 必须启用 mod_headers 模块

这是所有 CORS 配置生效的前提。XAMPP 默认注释掉了这一行：

LoadModule headers_module modules/mod_headers.so

不取消注释并彻底重启 Apache（不是“Restart”，是先 Stop 再 Start），Header set 指令在 httpd-vhosts.conf 或 httpd.conf 里写一百遍也无效，且不会报错，只会静默失效。

验证方式：访问 http://localhost/xampp/phpinfo.php，搜索 headers，看到 mod_headers 出现在 loaded modules 列表中才算成功。

常见错误：

• 只改了 .htaccess —— XAMPP 默认禁用 AllowOverride All，且 Header 不在允许覆盖的指令集内，放进去直接 500 错误
• 在虚拟主机外全局写 Header set —— Apache 可能忽略，必须包在 或 块里
• 路径写错，比如用了单反斜杠 X:\xampp\htdocs\api —— Windows 下必须用正斜杠 X:/xampp/htdocs/api 或双反斜杠 X:\\xampp\\htdocs\\api

PHP 接口必须返回正确 CORS 响应头

不能只靠前端代理或改端口糊弄过去。浏览器看到的是最终响应头，而它只来自 PHP 脚本或 Apache 配置。

最简可靠的写法（放在 PHP 文件最开头，任何 echo 或 print 之前）：

<?php
header("Access-Control-Allow-Origin: http://localhost");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type, X-Requested-With, Authorization");
header("Access-Control-Allow-Credentials: true");

if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    http_response_code(200);
    exit();
}
// 后续业务逻辑...
?>

注意点：

• Access-Control-Allow-Origin 不能是 * + Access-Control-Allow-Credentials: true 共存，否则浏览器直接拒绝
• 如果前端带 credentials: true（比如 Axios 里写了 withCredentials: true），就必须指定具体源，如 http://localhost
• 预检请求（OPTIONS）必须被明确处理，否则后续请求卡在 403/405
• PHP 输出前不能有任何空格、BOM 或 echo，否则 header() 报 Cannot modify header information

React 构建后不能直接调用 /api/login.php

开发时 npm start 能通，是因为 Webpack Dev Server 做了代理；build 后扔进 XAMPP，浏览器会按实际 URL 发请求。如果你把 React 放在 htdocs/react/，又在代码里写 axios.post("/api/login.php")，实际发出的是 http://localhost/react/api/login.php —— 这个路径下根本没有可执行的 PHP 文件，Apache 也不会去解析它。

正确做法：

• PHP 文件必须放在 Apache 可执行路径下，比如 htdocs/api/login.php
• React 中的请求 URL 改为绝对路径：axios.post("http://localhost/api/login.php")
• 确保 htdocs/api/ 目录在 块中已配置好 CORS 头（见第一个副标题）
• 别把 PHP 文件放进 src/ 或 build/api/ —— 构建过程不会复制它们，更不会让 Apache 执行

别用 .htaccess 配 CORS，也别信“改端口就能跨域”

.htaccess 在 XAMPP 下默认不可用，且 Header 指令不在 AllowOverride 白名单里，强行写进去只会触发 500 错误。而只改 Apache 端口（比如配成 8080）只是让前后端变成不同源，反而激活了 CORS 检查——但没响应头，照样被拦。

真正要做的只有三件事：

• 启用 mod_headers 并确认加载成功
• 在 块里写死 Header set Access-Control-Allow-Origin "http://localhost"
• PHP 文件开头加 header() 并处理 OPTIONS

复杂点在于路径隔离和响应头顺序——前者容易漏掉 basename 或 RewriteBase，后者容易在 PHP 里提前输出内容。这两处出错，连 phpinfo() 都救不回来。

好了，本文到此结束，带大家了解了《React与PHP跨域配置全解析》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！