自行搭建的PHP API出现CORS跨域问题 Postman正常但网页端请求报错

我自行搭建了用于数据交互的PHP API接口，目前遇到CORS跨域问题：使用Postman请求可以正常返回数据，但网页端应用请求时报错。

我已尝试在后端添加如下CORS配置代码：

header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');
header("Access-Control-Allow-Credentials: true");
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
header('Access-Control-Max-Age: 1000');
header('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With');

但添加后仍报相同错误。Postman返回的响应头中已包含上述CORS配置：

我先后尝试了3种前端请求方式，均报错：

• 方式1：

axios.get("localhost:1234/getSingersJson.php?test=[144]") 

• 方式2：

var url = "localhost:1234/getSingersJson.php"; 
var params = "[144]"; 
const xmlhttp = new XMLHttpRequest(); 
xmlhttp.onload = function(){ 
    console.log(this.responseText); 
} 
xmlhttp.open("GET", url + "?test=" + params); 
xmlhttp.send(); 

• 方式3：

fetch(url + "?test=" + params) 
.then(response => { 
    if(!response.ok) { 
        throw Error(response.statusText); 
    } 
    console.log(response) 
})

各请求方式对应的具体报错如下：

• fetch请求测试代码：

function api_test(){
    var url = "https://localhost:1234/getSingersJson.php";
    var params = "[144]";
    
    fetch(url + "?test=" + params) 
    .then(response => { 
        if(!response.ok) { 
            throw Error(response.statusText); 
        } 
        console.log(response) 
    })
}

• XMLHttpRequest请求测试代码：

function api_test(){
    var url = "https://localhost:1234/getSingersJson.php";
    var params = "[144]";
    
    const xmlhttp = new XMLHttpRequest();
    xmlhttp.onload = function(){
        console.log(this.responseText);
    }
    xmlhttp.open("GET", url + "?test=" + params);
    xmlhttp.send();
}

开发者工具的Network面板截图如下，请求和响应标签页均无内容：

补充说明：此前我在本地测试服务器运行该接口时出现上述问题，将PHP文件上传到AWS服务器后接口即可正常运行。

修复方案 #

1. 修正CORS头配置冲突 #

当前配置同时设置了Access-Control-Allow-Origin: *和Access-Control-Allow-Credentials: true，二者不符合浏览器规范互斥：携带凭证的跨域请求不允许使用通配符源。如果接口不需要接收Cookie/身份凭证，直接删除header("Access-Control-Allow-Credentials: true");即可；如果需要携带凭证，把*替换为前端页面的完整源地址（和前端部署地址完全匹配，例如http://localhost:5173）。

2. 响应OPTIONS预检请求 #

浏览器发送正式跨域请求前会先发送OPTIONS类型的预检请求，需要在PHP业务逻辑前提前响应这个请求，直接返回200状态码即可：

// 放在所有业务代码最前面
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    http_response_code(200);
    exit();
}

3. 排查本地测试环境问题 #

上传到AWS后可正常运行，说明问题出在本地环境：

• 确认本地PHP服务器1234端口的HTTPS证书是否受浏览器信任，自签未信任的证书会直接被浏览器阻断请求，导致Network面板无内容。也可以统一前端和接口的协议，要么都用HTTP，要么都用受信任的HTTPS。
• 检查本地Apache/Nginx是否有前置Header配置覆盖了PHP代码设置的CORS头，比如.htaccess文件、Nginx服务配置里的CORS相关规则。

4. 修正前端请求地址 #

部分测试代码的请求地址缺少协议头，需要补全http://或https://，否则浏览器会将地址识别为当前页面的相对路径，导致请求地址错误。

内容的提问来源于stack exchange，提问作者Young-Kwang Oh