Question

我正在制作一个使用脚本标签的shopify应用程序，我需要对我们的服务器进行ajax调用，以获取有关商店的所需信息。一切都很好，直到我的同事让我注意到它在iphone上根本不起作用。它也不适用于Mac上的safari，但它适用于chrome。

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

从我发现它应该是我需要在请求的页面上更改的标题，但我已经有了“Access-Control-Allow-Origin：*”，我尝试了所有可以找到的建议，但没有任何作用。< / p>

目前这就是我在请求页面上的内容，我正在使用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

尝试允许所有标头检查出您缺少任何标头

Access-Control-Allow-Headers：*

Answer 2

像往常一样，这是一个愚蠢的错误。我忘了把's'放到'https'。如果您从https网站向http网址发出请求，safari甚至不会尝试发送请求。

ajax cross origin请求在safari中不起作用，但在chrome和firefox中有效

2 个答案: