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

Posted 2023-03-04

【中文标题】ajax 跨源请求在 safari 中不起作用，但在 chrome 和 firefox 中起作用

【英文标题】：ajax cross origin request doesn't work in safari but works in chrome and firefox

【发布时间】：2018-04-20 08:29:26

【问题描述】：

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

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

根据我的发现，我需要在请求的页面上更改标题，但我已经有了“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。知道我应该怎么做才能解决这个问题吗？

【问题讨论】：

您可能希望使用***.com/q/47166384/441757 来编辑/更新您的问题并添加您在 Safari 开发工具控制台中看到的确切错误消息（如果有）。此外，如果您转到 Safari devtools 中的“网络”选项卡并重新加载并检查那里所有相关请求和响应的详细信息，包括 HTTP 状态代码和 HTTP 方法以及所有标头，并将它们也添加到问题中，这也会有所帮助

@sideshowbarker 我无法访问 Mac，但我设法使用带有 iphone 的 remotedebug-ios-webkit-adapter 进行调试并且没有错误。我只看到控制台日志“状态：0”。在网络选项卡中，我没有看到我的 ajax 调用，就好像它根本没有被调用（但如果我将 url 更改为我正在进行测试的同一个域，它就可以工作）。

【参考方案1】：

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

访问控制允许标题：*

【参考方案2】：

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