ajax 크로스 원점 요청이 사파리에서는 작동하지 않지만 크롬 및 파이어 폭스에서 작동합니다.

Question

스크립트 태그를 사용하는 shopify 앱을 만들고 있는데, 서버에 대한 정보를 얻기 위해 서버에 아약스 전화를해야합니다. 제 동료가 제 아이폰에서 전혀 작동하지 않는다는 것을 알게 될 때까지 모든 것이 잘 작동했습니다. 그것은 또한 맥에서 사파리에서 작동하지 않지만 그것은 크롬에서 작동합니다.

사파리에서 요청 상태가 항상 "0"이며 테스트 저장소에 요청을 보내려고했지만 서버 대신 내 테스트를 수행하고 200 개의 상태가 있음을 알았습니다. 이제 저는 그것이 교차 기점 문제라고 확신합니다.

요청한 페이지에서 변경해야하는 헤더가 있어야하지만 이미 "Access-Control-Allow-Origin : *"을 가지고 있으며 찾은 모든 제안을 시도했지만 아무 것도 작동하지 않았습니다. (나는에 jQuery를 사용했다

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'] 
]); 

이 내가 현재 자바 스크립트에서 전화를 걸 사용하고 기능입니다 :

현재이, 나는 laravel을 사용하고 제가 요청 된 페이지가있다 첫째하지만 난 그게 문제가 그래서는 자바 스크립트와 시도)라고 생각 : 그것은 크롬과 파이어 폭스에서해야처럼

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); 
} 

모든 작품, 그냥 사파리입니다. 이 문제를 해결하기 위해 내가해야 할 일이 있습니까? 모든 헤더가 그것을 확인하기 위해 당신이 어떤 헤더를 누락 수

Answer 1

시도

액세스 제어 - 허용 - 헤더 : * 항상 바보 같은 실수와 같은

Answer 2

. 나는 's'을 'https'에 넣는 것을 잊어 버렸다. 사파리는 https 웹 사이트에서 http url을 요청할 경우 요청을 보내려고 시도조차하지 않습니다.