I am developing a Shopify app that utilizes script tags and requires an ajax call to our server to retrieve necessary information about the shop. While everything seemed to be functioning correctly, my colleague pointed out that it was not working on his iPhone. Additionally, it is not working in Safari on Mac, although it works fine in Chrome.
Upon further investigation, I noticed that the status of the request is always "0" in Safari. When attempting a request to the test shop instead of our server, I received a 200 status, leading me to believe that this issue is related to cross-origin problems.
After exploring possible solutions, I have tried adjusting the headers on the requested page. Despite already including "Access-Control-Allow-Origin: *" and testing various suggestions, nothing seems to resolve the issue.
This is the current setup on the requested page using 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']
]);
And here is the JavaScript function currently being used to make the call (originally using jQuery but switched to plain JavaScript for troubleshooting):
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);
}
While the functionality is as expected in Chrome and Firefox, there are issues specifically with Safari. Any insights on how to address this problem would be greatly appreciated.