PHP前端跨域解决方案汇总-源码库

PHP前端跨域解决方案汇总：从入门到实战避坑指南

作为一名长期奋战在一线的PHP开发者，我深知跨域问题在前端开发中的棘手程度。记得刚入行时，每次遇到跨域报错都让我头疼不已。经过多年的项目实践，我总结出了几种在PHP环境下最实用的跨域解决方案，今天就和大家分享这些实战经验。

1. 最简方案：PHP设置响应头

这是我最常用的方法，简单直接。通过在PHP文件中设置响应头，告诉浏览器允许跨域请求。


// 设置允许所有域名访问
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');
header('Access-Control-Allow-Headers: Content-Type, Authorization');

// 如果是带凭证的请求，需要指定具体域名
header('Access-Control-Allow-Origin: https://example.com');
header('Access-Control-Allow-Credentials: true');

踩坑提示：使用通配符*时不能与Allow-Credentials同时使用，否则浏览器会拒绝请求。我曾在项目中因为这个细节调试了半天！

2. 预检请求处理：应对复杂跨域场景

当请求包含自定义头信息或使用非简单方法时，浏览器会先发送OPTIONS预检请求。这时需要在PHP中单独处理：


if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    header('Access-Control-Allow-Origin: https://example.com');
    header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
    header('Access-Control-Allow-Headers: Content-Type, X-Requested-With');
    header('Access-Control-Max-Age: 86400'); // 缓存24小时
    exit(0);
}

// 正常请求处理
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    header('Access-Control-Allow-Origin: https://example.com');
    // 你的业务逻辑代码
}

3. 代理方案：PHP作为中间层

当无法修改目标服务器配置时，我通常会在PHP端实现代理转发：


$targetUrl = 'https://api.external.com/data';
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $targetUrl);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, [
    'Content-Type: application/json'
]);

$response = curl_exec($ch);
curl_close($ch);

header('Content-Type: application/json');
echo $response;

4. 实战案例：AJAX跨域请求完整示例

结合前端代码，这里是一个完整的跨域请求示例：


// api.php 后端处理
header('Access-Control-Allow-Origin: http://localhost:3000');
header('Access-Control-Allow-Credentials: true');
header('Content-Type: application/json');

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $data = json_decode(file_get_contents('php://input'), true);
    // 处理业务逻辑
    echo json_encode(['status' => 'success', 'data' => $data]);
}


// 前端JavaScript
fetch('http://your-php-server/api.php', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    credentials: 'include',
    body: JSON.stringify({name: 'test'})
})
.then(response => response.json())
.then(data => console.log(data));