PHP 跨域的时候一个接口是 OK 的另一个不行？

Question

axios.post(`https://aaa.cn/xml/scp-xml/php/api/index.php?class=survey&method=info`, {
    id: "SCWJ202412-000003"
}, {withCredentials: true})

axios.post(`https://aaa.cn/xml/scp-xml/php/api/index.php?class=readerStu&method=login`, {
    "account": "0888888",
    "password": "qwer"
}, {withCredentials: true})

<?php
# 获取请求的 Origin
$Origin = $_SERVER['HTTP_ORIGIN'] ?? "";
# 允许的 Origins 列表
$Allowed = [
    'http://localhost:51730',
    'http://localhost:5173',
    'https://scp-erp.aidingyi.cn'
];
# 检查请求的 Origin 是否在允许列表中
header("Access-Control-Allow-Origin: " . ( in_array( $Origin, $Allowed ) ? $Origin : "*" ) );
# 设置其他 CORS 头部
header("Access-Control-Allow-Credentials: true");
header('Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE');
header('Access-Control-Allow-Headers: DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type');

请问这是为什么 这也太离谱了

Answer 1

1.通配符 Origin： 当 Access-Control-Allow-Credentials 设置为 true 时，使用 "" 作为 Access-Control-Allow-Origin 的回退值可能会导致问题。如果 Access-Control-Allow-Origin 是 "" 且 Access-Control-Allow-Credentials 是 true，浏览器将阻止请求。
2.预检请求： 确保服务器正确处理 OPTIONS 请求，因为浏览器会使用这些请求来在发送实际请求之前检查 CORS 策略。

我把你的PHP代码改了一下

<?php
# 获取请求的 Origin
$Origin = $_SERVER['HTTP_ORIGIN'] ?? "";
# 允许的 Origins 列表
$Allowed = [
    'http://localhost:51730',
    'http://localhost:5173',
    'https://scp-erp.aidingyi.cn'
];
# 检查请求的 Origin 是否在允许列表中
if (in_array($Origin, $Allowed)) {
    header("Access-Control-Allow-Origin: $Origin");
    header("Access-Control-Allow-Credentials: true");
    header('Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE');
    header('Access-Control-Allow-Headers: DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type');
    
    # 处理预检请求
    if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
        exit(0);
    }
} else {
    header("HTTP/1.1 403 Forbidden");
    echo "CORS 策略不允许从此来源访问。";
    exit(0);
}
?>

补充

强制触发预检请求，可以通过以下三种方法：

1. 添加自定义头部

添加自定义头部可以触发预检请求，因为自定义头部使请求变得不那么“简单”。

axios.post('https://aaa.cn/xml/scp-xml/php/api/index.php?class=survey&method=info', {
    id: "SCWJ202412-000003"
}, {
    withCredentials: true,
    headers: {
        'X-CustomHeader': 'value'
    }
});

2. 使用非简单请求方法

使用非简单请求方法（例如 PUT、DELETE）可以触发预检请求。

axios.put('https://aaa.cn/xml/scp-xml/php/api/index.php?class=survey&method=info', {
    id: "SCWJ202412-000003"
}, { 
    withCredentials: true 
});

3. 更改内容类型

更改内容类型为非默认值（例如 application/json）也可以触发预检请求。

axios.post('https://aaa.cn/xml/scp-xml/php/api/index.php?class=survey&method=info', {
    id: "SCWJ202412-000003"
}, {
    withCredentials: true,
    headers: {
        'Content-Type': 'application/json'
    }
});

通过这些方法，可以强制触发预检请求，以确保服务器能够正确处理跨域请求。

Answer 2

因为你的跨域头是通过 php header 函数发送的，可是你的一个请求代码有问题，所以这个请求头没法成功发送给浏览器，所以浏览器就提示跨域了。
调试问题多使用排除法，使用postman等调用接口，如果没有问题。但是浏览器调用提示跨域，那问题就可以定位为跨域问题，尝试通过不同方式解决。如果通过postman调用发现有一个接口报错，那就看看是不是代码有问题。
先找找自身的问题，而不是一上来就把锅甩给xxx

Answer 3

当我们在设置跨域请求时，Access-Control-Allow-Credentials: true 和 Access-Control-Allow-Origin 这两个响应头之间的关系非常微妙，且容易混淆。

具体来说：

Access-Control-Allow-Credentials: true: 这个头字段表示允许浏览器发送带有凭证（如 Cookie、Authorization header）的跨域请求。换句话说，它打开了一扇门，允许浏览器发送更“私密”的请求。
Access-Control-Allow-Origin: 这个头字段指定了哪些源可以访问资源。
当 Access-Control-Allow-Credentials: true 时，Access-Control-Allow-Origin 不能设置为 "*" 的原因：

安全性考虑： "*" 表示允许所有源访问，这在允许携带凭证的情况下是非常不安全的。想象一下，如果任何网站都能发送带有 Cookie 的请求到你的服务器，那么你的用户数据将面临极大的风险。
浏览器限制： 为了安全考虑，浏览器在 Access-Control-Allow-Credentials: true 设置为 true 时，会强制要求 Access-Control-Allow-Origin 不能为 "*"，而必须是一个具体的域名或域名列表。