解决跨域资源共享（CORS）问题：PHP与J*aScript实战教程

---

本教程深入探讨了Web开发中常见的跨域资源共享（CORS）问题，特别是当J*aScript通过Fetch API请求PHP后端时遇到的挑战。文章详细解释了CORS机制、预检请求（OPTIONS）的处理，并提供了PHP服务器端配置CORS响应头的完整示例代码，指导开发者如何正确配置Access-Control-Allow-Origin、Access-Control-Allow-Methods等，以确保跨域请求成功。

1. 理解跨域资源共享（CORS）

跨域资源共享（Cross-Origin Resource Sharing, CORS）是一种浏览器安全机制，旨在允许网页从不同域（协议、域名或端口）请求资源。由于浏览器的同源策略（Same-Origin Policy）限制，默认情况下，J*aScript只能与同源的服务器进行交互。当前端应用（例如运行在 http://localhost:3000）尝试向不同源的后端API（例如 https://api.example.com）发送请求时，浏览器会触发CORS机制，并要求服务器明确授权该跨域请求。如果服务器未正确配置CORS响应头，浏览器将阻止请求，并抛出“Cross-Origin Request Blocked”错误。

2. CORS请求的类型与预检请求

CORS请求主要分为两种类型：

• 简单请求 (Simple Requests)：满足特定条件的GET、HEAD或POST请求。这些请求不会触发CORS预检。条件包括：
  • HTTP方法是GET、HEAD或POST。
  • Content-Type 仅限于 application/x-www-form-urlencoded、multipart/form-data 或 text/plain。
  • 不使用自定义请求头。
• 非简单请求 (Preflighted Requests)：不满足简单请求条件的请求，例如使用了PUT、DELETE方法，或POST请求的Content-Type为application/json，或使用了自定义请求头。对于非简单请求，浏览器会在发送实际请求之前，自动发送一个HTTP OPTIONS方法请求到服务器，这就是所谓的“预检请求”（Preflight Request）。预检请求的目的是询问服务器是否允许实际的跨域请求。服务器必须响应OPTIONS请求，并包含适当的CORS响应头，告知浏览器允许哪些源、方法和头。如果预检成功，浏览器才会发送实际请求；否则，请求会被阻止。

3. 关键的CORS响应头

为了正确处理CORS请求，服务器需要在响应中包含一系列Access-Control-*头：

• Access-Control-Allow-Origin: 必需。指定允许访问资源的来源。可以是一个具体的URL（例如 https://your-frontend-domain.com），也可以是通配符 *（表示允许任何来源，但在生产环境中应谨慎使用，因为它可能带来安全风险）。
• Access-Control-Allow-Methods: 必需。指定允许跨域访问的HTTP方法，例如 GET, POST, OPTIONS, PUT, DELETE。
• Access-Control-Allow-Headers: 必需。指定允许跨域请求携带的自定义请求头。如果请求中包含 Content-Type: application/json 或其他自定义头，服务器必须在此处列出它们。
• Access-Control-Allow-Credentials: 可选。如果前端需要发送Cookie或HTTP认证凭证（例如Authorization头），此头必须设置为 true。注意，当此头为 true 时，Access-Control-Allow-Origin 不能设置为 *，必须指定具体的来源。
• Access-Control-Max-Age: 可选。指定预检请求的结果可以被浏览器缓存多长时间（秒）。在此期间，浏览器无需再次发送OPTIONS预检请求。

4. PHP后端CORS配置实战

以下是一个PHP后端正确配置CORS以处理J*aScript跨域请求的示例。该示例着重于处理OPTIONS预检请求，并动态设置Access-Control-Allow-Origin。

AI at Meta

Facebook 旗下的AI研究平台

72 查看详情

<?php
class ControllerCustomapiTest extends Controller {
    public function index() {
        // 1. 设置Access-Control-Allow-Origin
        // 优先使用HTTP_ORIGIN头来确定请求来源，并动态设置允许的来源
        // 建议在这里维护一个允许的来源白名单，以增强安全性
        if (isset($_SERVER['HTTP_ORIGIN'])) {
            $origin = $_SERVER['HTTP_ORIGIN'];
            // 示例：可以根据白名单判断是否允许该来源
            // $allowedOrigins = ['http://localhost:4200', 'https://your-frontend-domain.com'];
            // if (in_array($origin, $allowedOrigins)) {
            //     header("Access-Control-Allow-Origin: " . $origin);
            // } else {
            //     // 如果来源不在白名单中，可以拒绝请求
            //     http_response_code(403);
            //     die('Forbidden Origin');
            // }
            header("Access-Control-Allow-Origin: " . $origin); // 简化示例：允许任何发送HTTP_ORIGIN的来源
        } else {
            // 如果没有HTTP_ORIGIN头（通常是同源请求或某些非浏览器请求），
            // 可以设置一个默认的允许来源，或者根据实际情况设置为 '*' (谨慎使用)
            header("Access-Control-Allow-Origin: *"); // 生产环境请务必替换为具体域名
        }

        // 2. 设置Access-Control-Allow-Credentials (如果需要发送Cookie或认证头)
        header('Access-Control-Allow-Credentials: true');

        // 3. 设置Access-Control-Max-Age (缓存预检请求结果，单位：秒)
        header('Access-Control-Max-Age: 86400'); // 缓存1天

        // 4. 处理预检 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']}");
            }
            // 预检请求成功，返回204 No Content状态码并终止脚本
            http_response_code(204);
            die();
        }

        // 5. 处理实际请求 (GET, POST, PUT, DELETE 等)
        // 设置响应内容类型为JSON
        header('Content-Type: application/json');

        // 构建并发送JSON响应
        $response = array('success' => true, 'message' => '数据已成功接收');
        echo json_encode($response);
    }
}
?>

代码解释：

• Access-Control-Allow-Origin: 优先检查 $_SERVER['HTTP_ORIGIN'] 来获取请求来源。在生产环境中，强烈建议您根据一个预定义的白名单来验证 HTTP_ORIGIN，而不是无条件地回显它或使用 *。
• Access-Control-Allow-Credentials: 如果前端请求需要携带认证信息（如Cookie或Authorization头），必须将其设置为 true。同时，Access-Control-Allow-Origin 不能为 *。
• Access-Control-Max-Age: 缓存预检请求的有效时间。在此时间内，浏览器将不再发送重复的OPTIONS请求。
• if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS'): 这是处理预检请求的关键。
  • 它会根据浏览器在 HTTP_ACCESS_CONTROL_REQUEST_METHOD 和 HTTP_ACCESS_CONTROL_REQUEST_HEADERS 中声明的需求，设置相应的 Access-Control-Allow-Methods 和 Access-Control-Allow-Headers。
  • 预检请求成功后，服务器应返回 204 No Content 状态码，并且必须使用 die() 终止脚本执行，以防止发送实际请求的响应内容。
• 实际请求处理: 在 OPTIONS 块之后，才是处理 GET, POST 等实际请求的逻辑。此时，CORS头已经设置完毕，可以正常返回业务数据。

5. J*aScript客户端请求示例

前端J*aScript代码通常不需要为CORS做特殊处理，只需按照常规方式发送请求即可。浏览器会自动处理预检请求和CORS验证。

const url = 'https://opecart9349.000webhostapp.com/unzipper/opencart/index.php?route=customapi/test'; // 替换为你的PHP后端URL

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json', // 触发非简单请求，需要预检
    // 'Authorization': 'Bearer your_token_here' // 如果需要发送认证头，服务器也需在Allow-Headers中允许
  },
  body: JSON.stringify({ name: 'John Doe', age: 30 }) // 示例数据
})
  .then(response => {
    // 检查HTTP状态码，处理非2xx响应
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log('Success:', data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

6. 注意事项与最佳实践

• 安全性优先：永远不要在生产环境中使用 Access-Control-Allow-Origin: *，除非你明确知道所有资源都应该对所有来源开放。这可能导致跨站请求伪造（CSRF）等安全漏洞。
• 精确指定来源：始终将 Access-Control-Allow-Origin 设置为你的前端应用的具体域名（或一个域名白名单），例如 https://your-frontend-domain.com。
• 正确处理 OPTIONS 请求：这是解决CORS问题的最常见痛点。确保你的服务器能够识别并正确响应OPTIONS请求，返回正确的CORS头，并立即终止脚本。
• 使用 $_SERVER['HTTP_ORIGIN']：在动态设置 Access-Control-Allow-Origin 时，优先使用 $_SERVER['HTTP_ORIGIN'] 来获取请求来源，而不是 $_SERVER['HTTP_REFERER']，因为 HTTP_ORIGIN 是专门为CORS设计的，而 HTTP_REFERER 可能不可靠或缺失。
• 调试工具：利用浏览器开发者工具（通常是F12）的网络（Network）选项卡，检查请求和响应的HTTP头。特别关注OPTIONS请求的响应头，确保所有Access-Control-*头都正确设置。
• 服务器配置：除了代码中的CORS头，有时Web服务器（如Apache或Nginx）的配置也可能影响CORS。确保它们没有覆盖或阻止你的PHP脚本设置的CORS头。

7. 总结

跨域资源共享（CORS）是Web开发中不可避免的一部分。正确理解CORS机制，特别是预检请求的作用，并按照本文提供的PHP后端配置示例，可以有效地解决“Cross-Origin Request Blocked”错误。核心在于服务器端要明确告知浏览器，哪些跨域请求是被允许的，以及允许哪些方法、头和来源。通过细致的配置和严谨的安全考量，可以确保您的Web应用在不同域之间安全、顺畅地通信。

以上就是解决跨域资源共享（CORS）问题：PHP与J*aScript实战教程的详细内容，更多请关注php中文网其它相关文章！

# javascript  # php  # a  # app  # 浏览器  # cookie  # nginx  # apache  # json  # 前端  # js  # java  # 高原seo优化公司  # 什么是网站建设和优化  # 荣昌县网站建设建议  # 中国旅游局推广网站  # 是一个  # 南京百度营销推广  # 正确处理  # 编辑器  # 可选  # 在此  # 这是  # 后端  # 设置为  # 资源共享  # 自定义  # gmc网站建设费用  # 保定网站建设服务器  # 黄页网站推广方案  # php网站建设成都  # 网站建设与推广认可l火17星热情 

相关栏目： 【 Google疑问12 】 【 Facebook疑问10 】 【 优化推广96088 】 【 技术知识133117 】 【 IDC资讯59369 】 【 网络运营7196 】 【 IT资讯61894 】

相关推荐： mysql怎么查询数据_mysql基础查询语句使用教程  邮政快递寄件查询入口 邮政快递收件查询入口  键盘保修需要什么_键盘售后维修流程  Apple Music无故扣费引质疑  如何在CSS中清除浮动解决背景颜色不包裹内容问题_clear after技巧  发博客与长微博技巧  如何自定义苹果手机铃声  在J*a中如何实现在线问答与评分系统_问答评分项目开发方法说明  小米civi如何设置锁屏时间  《兴业银行》注册登录方法  什么是Satis，如何用它搭建一个私有的composer仓库？  c++20的指定初始化(Designated Initializers)怎么用_c++ C风格结构体初始化  j*a中ArrayBlockingQueue的使用  J*aScript实现下拉菜单驱动的动态表格数据展示  如何查询个人病历记录  天堂漫画网页版在线阅读 天堂漫画手机版入口  126邮箱网页在线登录2025_126邮箱网页版入口官方地址  智学网app怎么登录忘记密码_智学网app忘记密码找回与重新登录操作方法  Google Drive API服务器端访问指南：服务账户认证详解  小红书网页版首页入口 小红书网页版电脑端官方登录链接  J*aScript：从子元素中批量移除特定CSS类  《全民k歌》网页版最新登录入口一览  口腔诊所管理软件推荐  汽车之家网页版免费登录_汽车之家官网首页直接进入  mysql如何回滚事务_mysql ROLLBACK事务回滚方法  雨课堂官网在线登录 网页版雨课堂登录链接  德邦物流在线查询系统 德邦快递货物运输追踪  创客贴登录页面入口 创客贴网页版最新网址链接  韩剧圈正版官网入口_韩剧圈官方指定登录  C++ switch case字符串_C++如何实现字符串switch匹配  抖音官网入口快速访问 抖音网页版账号注册解析  智云Q3和Q2有什么升级_智云Q3与Q2手持云台功能与性能对比分析  5G和6G的连接密度有什么区别 6G每平方公里能连接多少设备  Go Template中优雅处理循环最后一项：自定义函数实践  《领英》查看屏蔽名单方法  《荔枝fm》导出文件教程  奥克斯空调不制热啥毛病_奥克斯空调不制热原因分析及解决技巧  《桃源记2》资源采集攻略  喜茶GO更换登录账号方法  12306APP选座怎么选充电位置_12306APP带充电插座座位选择方法与技巧  如何通过settings.json个性化您的VS Code体验  Lar*el Eloquent中通过Join查询关联数据表：解决多行子查询问题  在VS Code中利用AI辅助进行代码迁移  XPath动态元素定位：如何精准选择文本内容变化的元素  在J*a中如何实现类的继承与方法重用_OOP继承方法重用技巧分享  抖音号显示企业机构号是什么意思？企业机构号申请条件是什么？  重返未来：1999卡戎全方位攻略  Golang如何实现HTTP请求重试机制_Golang HTTP请求错误处理策略  Vue 3中独立响应式实例的创建与应用  小红书网页版怎么进 小红书网页版通用入口 

 2025-11-17