本教程详细探讨了php和javascript应用中常见的跨域资源共享（cors）错误及其解决方案。文章深入解析了cors机制，特别是预检请求（options）的处理，并提供了专业的php后端配置示例，指导开发者如何正确设置access-control-allow-origin、access-control-allow-methods等http头，以确保前端javascript能够安全、顺畅地与后端api进行跨域通信。
在Web开发中，浏览器的同源策略（Same-Origin Policy）是一项重要的安全机制，它限制了来自一个源的文档或脚本如何与来自另一个源的资源进行交互。当前端JavaScript代码（例如运行在http://example.com）尝试向不同源（例如http://api.example.com或https://another-domain.com）的后端API发送请求时，浏览器会触发跨域限制，导致请求被阻止，出现“Cross-Origin Request Blocked”错误。
跨域资源共享（CORS）机制正是为了解决这一问题而设计的。它允许服务器声明哪些源被授权访问其资源。当浏览器检测到跨域请求时，它会向服务器发送一个特殊的请求（通常是预检请求），以获取服务器的CORS策略。如果策略允许，浏览器才会发送实际的请求。
当您遇到“Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource... (Reason: CORS request did not succeed). Status code: (null).”这类错误时，通常意味着以下两种情况之一：
以下是一个典型的JavaScript fetch POST请求示例，它可能会触发预检请求：
立即学习“PHP免费学习笔记（深入）”；
const url = 'https://your-backend-api.com/customapi/test';
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json', // 非简单请求头
},
body: JSON.stringify({ key: 'value' })
})
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Error:', error);
});为了正确处理跨域请求，PHP后端需要进行适当的配置，核心在于设置正确的HTTP响应头。
最初，开发者可能尝试在PHP中添加如下CORS头：
<?php
class ControllerCustomapiTest extends Controller {
public function index() {
header('Access-Control-Allow-Origin: *'); // 允许所有来源
header('Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE');
header('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With');
header('Content-Type: application/json');
$response = array('success' => true);
echo json_encode($response);
}
}
?>这种配置虽然设置了一些CORS头，但存在两个主要问题：
一个健壮的CORS解决方案需要明确指定允许的来源，并专门处理OPTIONS预检请求。
核心思路：
以下是完善的PHP CORS配置代码示例：
<?php
// 1. 定义允许的来源白名单
// 强烈建议将此列表配置为您的前端应用的实际域名
$allowedOrigins = [
'http://localhost:4200', // 例如，您的本地开发环境
'https://your-frontend-domain.com', // 例如，您的生产前端域名
// 如果有其他需要跨域访问的域名，请在此处添加
];
// 获取当前请求的来源（Origin）
$requestOrigin = isset($_SERVER['HTTP_ORIGIN']) ? $_SERVER['HTTP_ORIGIN'] : '';
// 2. 设置 Access-Control-Allow-Origin 头
// 只有当请求来源在白名单中时，才设置此头
if (in_array($requestOrigin, $allowedOrigins)) {
header("Access-Control-Allow-Origin: " . $requestOrigin);
// 如果前端需要发送Cookie、HTTP认证信息等凭据，需要设置此头为 true
header('Access-Control-Allow-Credentials: true');
// 预检请求结果的缓存时间，单位秒。浏览器会在此时间内缓存预检结果，减少 OPTIONS 请求次数。
header('Access-Control-Max-Age: 86400'); // 缓存一天
} else {
// 如果请求来源不在白名单中，不设置 Access-Control-Allow-Origin 头
// 浏览器将因此阻止跨域请求，这是一种安全的默认行为。
// 您也可以选择在这里返回一个错误响应，但通常不设置头是更简洁的做法。
}
// 3. 处理预检请求 (OPTIONS 方法)
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
// 允许的HTTP方法
if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD'])) {
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
}
// 允许的自定义请求头
if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS'])) {
header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
}
// 对于预检请求，只需返回CORS头，无需执行业务逻辑，并终止脚本
die('OK');
}
// 4. 实际业务逻辑处理
// 以下是您的API控制器或处理实际请求的代码
class ControllerCustomapiTest extends Controller { // 假设您的框架结构
public function index() {
// 确保实际响应的Content-Type是正确的
header('Content-Type: application/json');
// 这里是您的API业务逻辑
// 例如，处理POST请求的数据
$input = file_get_contents('php://input');
$data = json_decode($input, true);
$response = array(
'success' => true,
'message' => '数据已成功接收并处理',
'received_data' => $data
);
echo json_encode($response);
}
}
?>代码解释：
前端JavaScript代码通常不需要为CORS做特殊处理，因为CORS是服务器和浏览器之间协商的机制。但是，如果您的请求需要发送Cookie或其他认证凭据，您需要在fetch请求中添加credentials: 'include'：
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
credentials: 'include', // 如果需要发送Cookie等凭据
body: JSON.stringify({ key: 'value' })
})
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Error:', error);
});请确保在PHP后端也设置了 header('Access-Control-Allow-Credentials: true');。
解决PHP与JavaScript之间的CORS问题，关键在于理解同源策略、CORS机制以及预检请求（OPTIONS）的作用。通过在PHP后端实施一套完善的CORS配置，特别是针对OPTIONS请求的独立处理和基于白名单的Access-Control-Allow-Origin设置，可以有效解决“Cross-Origin Request Blocked”错误，确保前后端应用的顺畅通信。始终牢记，CORS配置不仅关乎功能实现，更是Web安全的重要组成部分，应谨慎配置。
以上就是解决PHP与JavaScript跨域请求（CORS）问题：全面指南的详细内容，更多请关注php中文网其它相关文章！
PHP怎么学习？PHP怎么入门？PHP在哪学？PHP怎么学才快？不用担心，这里为大家提供了PHP速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
1002
收藏
