javascript - ajax跨源请求在 safari 中不起作用，但在 chrome 和 firefox 中起作用

Question

我正在制作一个使用脚本标签的 Shopify 应用程序，我需要对我们的服务器进行 ajax 调用以获取有关商店所需的信息。一切都运行得很好，直到我的同事让我注意到它在他的 iPhone 上根本无法运行。它也无法在 mac 上的 safari 中运行，但可以在 chrome 中运行。

我注意到在 safari 中请求的状态始终为“0”，我尝试向我正在执行测试的测试商店而不是我们的服务器发出请求，并得到了 200 状态。所以现在我很确定这是一个跨源问题。

据我发现，它应该是我需要在请求的页面上更改的 header ，但我已经有了“Access-Control-Allow-Origin: *”，并且我尝试了我能找到的所有建议，但没有任何效果。

目前这是我在请求的页面上的内容，我正在使用 laravel:

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");

$shop = Shop::where("domain", request('shop'))->first();

echo json_encode(
[ 
    'logo' => $shop->logo, 
    'text' => $shop->customizable_text, 
    'version' => $shop['plan'] 
]);

这是我当前用来在 javascript 中进行调用的函数(我一开始使用的是 jquery，但我认为这是问题所在，所以我只尝试使用 javascript):

function ajaxRequest(url, parameters, callback){
const req = new XMLHttpRequest();

req.onreadystatechange = function(event) {
    // XMLHttpRequest.DONE === 4
    if (this.readyState === XMLHttpRequest.DONE) {
        if (this.status === 200) {
            callback(this.responseText);
        } else {
            console.log("Status: %d (%s)", this.status, this.statusText);
        }
    }
};

if(parameters.keys.length){
    url = url + "?"
    for(var i = 0; i < parameters.param.length; i++){
        if(i == 0){
            url = url + parameters.keys[i] + "=" + parameters.param[i]
        }
        else{
            url = url + "&" + parameters.keys[i] + "=" + parameters.param[i];
        }
    }
}

req.open('GET', url, true);
req.send(null);
}

一切都像在 Chrome 和 Firefox 中一样工作，只是 Safari 而已。知道我应该做什么来解决这个问题吗？

Answer 1

尝试允许所有 header 检查是否缺少任何 header

访问控制允许 header :*