本文深入探讨了PHP与JavaScript进行跨域资源共享（CORS）时遇到的常见问题，特别是“Cross-Origin Request Blocked”错误。教程详细解释了CORS机制，包括预检请求（OPTIONS）的处理，并提供了在PHP后端正确配置`Access-Control`系列HTTP响应头的实用代码示例和最佳实践，旨在帮助开发者有效解决跨域通信障碍。
在现代Web开发中，前端（如使用JavaScript）与后端（如使用PHP）进行数据交互是常态。然而，由于浏览器的“同源策略”（Same-Origin Policy）安全限制，当一个网页尝试请求不同源（协议、域名或端口任一不同）的资源时，浏览器会阻止该请求，并抛出“Cross-Origin Request Blocked”错误。这就是跨域问题。
为了解决这一问题，W3C推出了跨域资源共享（CORS）标准。CORS允许服务器在响应头中声明哪些源可以访问其资源，从而放宽同源策略的限制。
CORS请求分为“简单请求”和“非简单请求”。
立即学习“PHP免费学习笔记（深入）”；
简单请求：满足以下所有条件的请求：
非简单请求：不满足简单请求条件的任何请求，例如：
对于非简单请求，浏览器在发送实际请求之前，会先发送一个OPTIONS类型的“预检请求”（Preflight Request）到目标服务器。这个预检请求的目的是询问服务器，是否允许当前源发送实际请求，以及允许使用哪些HTTP方法和请求头。服务器必须对这个预检请求做出正确的响应，包含一系列Access-Control头部，浏览器才会继续发送实际请求。如果预检请求失败（例如，服务器没有正确响应CORS头），浏览器将直接阻止后续的实际请求。
解决跨域问题的关键在于服务器端（PHP）正确设置CORS相关的HTTP响应头。以下是几个最重要的头及其作用：
Access-Control-Allow-Origin:
Access-Control-Allow-Methods:
Access-Control-Allow-Headers:
Access-Control-Allow-Credentials:
Access-Control-Max-Age:
以下是一个健壮的PHP代码示例，用于处理CORS请求，特别是预检请求：
<?php
class ControllerCustomapiTest extends Controller {
public function index() {
// 1. 获取请求的源 (Origin)，用于动态设置 Access-Control-Allow-Origin
// 通常从 HTTP_ORIGIN 头获取，如果不存在，某些旧浏览器可能使用 HTTP_REFERER
$origin = isset($_SERVER['HTTP_ORIGIN']) ? $_SERVER['HTTP_ORIGIN'] : '';
// 允许的源列表
$allowedOrigins = [
'http://localhost:4200', // 示例：您的前端开发环境
'https://your-production-frontend.com' // 示例：您的生产环境
];
// 检查请求源是否在允许列表中
if (in_array($origin, $allowedOrigins)) {
header("Access-Control-Allow-Origin: " . $origin);
} else {
// 如果不在允许列表中，可以拒绝访问或设置一个默认值（不推荐*）
// 或者直接不设置 Access-Control-Allow-Origin，浏览器会阻止请求
// header("Access-Control-Allow-Origin: https://your-default-frontend.com"); // 示例
}
// 允许携带认证信息（如Cookie）
header('Access-Control-Allow-Credentials: true');
// 预检请求结果缓存时间，单位秒 (例如：一天)
header('Access-Control-Max-Age: 86400');
// 2. 处理 OPTIONS 预检请求
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
// 允许的HTTP方法
if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD'])) {
header("Access-Control-Allow-Methods: GET, POST, PUT, PATCH, DELETE, OPTIONS");
}
// 允许的请求头
if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS'])) {
header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
}
// 预检请求处理完毕，终止脚本执行
die('OK');
}
// 3. 处理实际请求 (GET, POST, etc.)
// 设置响应内容类型为JSON
header('Content-Type: application/json');
// 示例：实际业务逻辑响应
$response = array(
'success' => true,
'message' => 'Data received successfully!',
'data' => $_POST // 假设是POST请求，这里可以处理请求体
);
echo json_encode($response);
}
}
?>代码解析：
动态设置 Access-Control-Allow-Origin:
设置 Access-Control-Allow-Credentials 和 Access-Control-Max-Age:
处理 OPTIONS 预检请求:
处理实际请求:
前端JavaScript代码通常不需要为CORS做特殊处理，只需按照正常的fetch或XMLHttpRequest方式发送请求即可。如果后端设置了Access-Control-Allow-Credentials: true，前端也需要相应地设置：
const url = 'https://opecart9349.000webhostapp.com/unzipper/opencart/index.php?route=customapi/test';
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
// 如果后端允许，可以添加自定义头，例如 'Authorization': 'Bearer YOUR_TOKEN'
},
// 如果后端设置了 Access-Control-Allow-Credentials: true，则需要添加此项
credentials: 'include', // 允许发送和接收Cookie等凭证
body: JSON.stringify({ key: 'value' }), // 示例：发送JSON数据
})
.then(response => {
// 检查响应状态码，处理HTTP错误
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Error:', error);
});解决PHP与JavaScript之间的CORS问题，核心在于理解同源策略、CORS机制，特别是预检请求（OPTIONS）的工作原理。通过在PHP后端正确配置Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers等响应头，并对OPTIONS请求进行特殊处理并立即终止，可以有效地消除“Cross-Origin Request Blocked”错误，实现前后端的安全、顺畅通信。遵循本文提供的代码示例和最佳实践，将有助于构建更健壮、更安全的跨域Web应用。
以上就是解决PHP与JavaScript跨域请求（CORS）问题：一份全面的教程的详细内容，更多请关注php中文网其它相关文章！
PHP怎么学习？PHP怎么入门？PHP在哪学？PHP怎么学才快？不用担心，这里为大家提供了PHP速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
944
收藏
