解决 PHP 后端接口跨域访问被拒绝问题（CORS 配置教程）-html教程-PHP中文网

本文详解如何在 PHP 服务端正确配置 CORS 响应头，使前端 JavaScript 能安全、合法地跨域调用 Login.php 等 API 接口，彻底解决 “No 'Access-Control-Allow-Origin' header is present” 错误。

本文详解如何在 php 服务端正确配置 cors 响应头，使前端 javascript 能安全、合法地跨域调用 `login.php` 等 api 接口，彻底解决 “no 'access-control-allow-origin' header is present” 错误。

当本地开发环境（如 http://127.0.0.1:5500）通过 XMLHttpRequest 或 fetch 请求远程 PHP 接口（如 http://cop4331-5.com/LAMPAPI/Login.php）时，浏览器会因同源策略（Same-Origin Policy）触发 CORS（Cross-Origin Resource Sharing）预检机制。若服务端未显式声明允许跨域，就会抛出如下典型错误：

Access to XMLHttpRequest at 'http://cop4331-5.com/LAMPAPI/Login.php' 
from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

该错误根源不在前端代码或代理工具，而在于 PHP 后端未返回合规的 CORS 响应头。因此，最直接、标准且安全的解决方案是在 PHP 文件头部添加必要的 HTTP 头部声明。

✅ 正确配置 PHP 端 CORS 响应头

在 Login.php（或其他需暴露给前端的 API 文件）最顶部、任何输出（包括空格、BOM、echo）之前插入以下 PHP 代码：

<?php // 允许指定源（生产环境推荐）
header('Access-Control-Allow-Origin: http://127.0.0.1:5500');
// 或允许任意源（仅限开发/测试环境，禁止用于生产）
// header('Access-Control-Allow-Origin: *');

// 允许的请求方法
header('Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE');
// 允许携带的请求头（如 Authorization、Content-Type）
header('Access-Control-Allow-Headers: Content-Type, X-Requested-With, Authorization');
// 允许前端读取的响应头（如自定义 token 字段）
header('Access-Control-Expose-Headers: X-Auth-Token');
// 允许携带 Cookie（若需 session 认证，必须同时设为 true 且前端 xhr.withCredentials = true）
header('Access-Control-Allow-Credentials: true');

// 处理预检请求（OPTIONS）
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    http_response_code(200);
    exit;
}
// 后续正常业务逻辑（如接收 JSON、验证用户、返回 JSON 响应）
?>

⚠️ 关键注意事项：

header() 必须在任何 HTML 输出、echo、空白字符甚至 UTF-8 BOM 之前调用，否则将触发 headers already sent 错误；

若使用 * 通配符作为 Access-Control-Allow-Origin 值，则不能同时设置 Access-Control-Allow-Credentials: true（浏览器会拒绝），二者互斥；

生产环境务必限制 Allow-Origin 到可信域名列表（如 https://myapp.com），避免开放给任意站点造成安全风险；

若前端使用 xhr.withCredentials = true（例如需传递 Cookie 或认证头），后端必须明确指定源（不可用 *），并启用 Allow-Credentials。

? 前端适配建议（补充验证）

确保前端 XMLHttpRequest 显式支持凭证（如需 Session）：

xhr.open("POST", url, true);
xhr.withCredentials = true; // ← 关键：与后端 Allow-Credentials 匹配
xhr.setRequestHeader("Content-type", "application/json; charset=UTF-8");

同时，建议在发送前统一处理 OPTIONS 预检失败的兜底逻辑（非必需，但增强健壮性）：

xhr.onerror = function() {
    document.getElementById("loginResult").innerHTML = 
        "网络请求失败，请检查服务端 CORS 配置是否生效。";
};

? 总结

❌ 不要依赖“CORS 代理”绕过问题——它增加延迟、引入单点故障，且无法替代服务端合规配置；
✅ 唯一标准解法是 PHP 主动声明 CORS 响应头，核心为 Access-Control-Allow-Origin 及配套头；
✅ 开发阶段可临时设为 *，上线前务必替换为精确域名白名单；
✅ 所有涉及身份认证的跨域请求，必须前后端协同配置 withCredentials 与 Allow-Credentials。

完成上述配置后，刷新前端页面即可成功发起跨域登录请求，错误彻底消失，系统进入可测试、可部署状态。

php免费学习视频：立即使用
踏上前端学习之旅，开启通往精通之路！从前端基础到项目实战，循序渐进，一步一个脚印，迈向巅峰！