Запрос CORS не работает в Safari

Я делаю запрос CORS xhr. Это отлично работает в chrome, однако, когда я запускаю safari, я получаю "не могу загрузить - - - - доступ не разрешен Access-control-allow-origin". Код точно такой же и я поставил кеш на сервере. Ниже приведен мой код.(контроль доступа, но вы можете попробовать без специального accessToken)

 var water;
 var req = new XMLHttpRequest;
 req.overrideMimeType("application/json");
 req.open('GET', 'https://storage.googleapis.com/fflog/135172watersupplies_json', true);
 req.setRequestHeader('Authorization', 'Bearer ' + accessToken);
 origThis = this;
 var target = this;
 req.onload = function() {
 water = req;

 req.send(null);

после просмотра заголовков запросов я вижу, что сначала выполняется запрос опций, и это запрос, который не разрешен. Этот заголовок origin не включен в ответ в Safari, но находится в chrome. Что могло вызвать это. Любая помощь будет очень признательна.

обновление: Я пробовал в Safari для Windows, и он работает, поэтому я не уверен, что здесь происходит. Mac, который я использую, является удаленным доступом (Macincloud.com), но я не думаю, что это имеет какое-то отношение к этому.

38
cors javascript safari xmlhttprequest

9 ответов

я столкнулся с той же ошибкой при выполнении запроса XHR для файла в Amazon S3. На Safari 7 это не удалось. Я знаю, что вы не используете Amazon S3, но я думал, что опубликую, если это решение поможет другим.

проблема заключалась в том, что Safari 7 установил заголовок Access-Control-Request-Headers в "origin, x-requested-with", но моя конфигурация AWS CORS разрешила только"x-requested-with":

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
        <AllowedHeader>x-requested-with</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

я добавил "origin" в качестве разрешенного заголовка, и все сработало штраф.

        <AllowedHeader>origin</AllowedHeader>

Примечание: The AllowedOrigin of * только для целей развития. См. комментарий @andes ниже для получения дополнительной информации.

40

Спасибо за все ответы, я понял, наконец, себя. Я добавил "Origin" к моим responseHeaders и теперь отлично работает.

5

У меня просто была аналогичная проблема, ошибка CORS. Он будет работать в Firefox и Chrome, но не Safari 10.

оказалось, нам нужно было поставить косую черту на URL JSON.

3

для запроса CORS вы должны использовать свой origin fflog.storage.googleapis.com. Если вы используете общие storage.googleapis.com origin, любой сайт может получить доступ к вашему ведру.

попробуйте попробовать удалить overrideMimeType? Если вы установите тип mime, он вернется правильно.

у меня также есть проблема с запросом Safari POST, но пока нет ответа. Вам хорошо.

0

попробуйте удалить overide mimetype.

 var
 jsonhandler=function(){var req=JSON.parse(this.response);console.log(req)},
 req=new XMLHttpRequest;
 req.open('GET','https://storage.googleapis.com/fflog/135172watersupplies_json');
 req.setRequestHeader('Authorization','Bearer '+accessToken);
 req.onload=jsonhandler;
 req.send();
0

когда я запрашиваю Ваш URL, я возвращаю следующее заголовки управления доступом:

Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: Authorization, Cache-Control, Content-Length, Date, Expires, Server, Transfer-Encoding, x-goog-meta-foo1

Я подозреваю, что это как-то связано с вашими заголовками управления доступом - либо вы что-то упускаете, либо слишком конкретны.

учитывая, что вы на самом деле отправляете пользовательский заголовок, вы можете попробовать:

Access-Control-Allow-Headers: *

вы также можете увидеть, если оставить Access-Control-Expose-Headers имеет значение.

помимо этого, это было бы действительно полезно чтобы увидеть фактические заголовки запроса / ответа.

0

когда я пытаюсь

curl -v -X OPTIONS \
  -H 'Origin: fflog.storage.googleapis.com' \
  -H 'Access-Control-Request-Method: GET'  \
  https://storage.googleapis.com/fflog/135172watersupplies_json

Я получаю, среди других заголовков:

Access-Control-Allow-Origin: *

когда я выполняю AJAX-запросы против https://storage.googleapis.com/fflog/135172watersupplies_json из Safari 6.0.4 на Mac OS 10.8.3 я получаю 403 ошибки, но они все выполняются.

поэтому я могу только догадываться, что вы пытаетесь отправить credentialed request для которого подстановочный знак Access-Control-Allow-Origin не допускается.

0

Что касается Amazon S3, он работал только в safari после того, как я добавил более разрешенные заголовки, тип контента и диапазон. Один из них сделал свое дело.

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
        <AllowedHeader>Origin</AllowedHeader>
        <AllowedHeader>X-Requested-With</AllowedHeader>
        <AllowedHeader>Content-Type</AllowedHeader>
        <AllowedHeader>Range</AllowedHeader>
    </CORSRule>
</CORSConfiguration>
0

У меня была та же проблема, когда CORS работал в Chrome, но бросил ошибку origin в Safari. Оказалось, что это проблема с авторизацией Kerberos. Когда я загрузил URL XHR непосредственно в Safari, мне было предложено ввести учетные данные. После ввода их я вернулся на исходный сайт, и Safari больше не имел ошибки CORS.

0