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

Я делаю запрос CORS xhr. Это отлично работает в chrome, однако, когда я запускаю сафари, я получаю сообщение "Can not load ---- access, разрешенное Access-control-allow-origin". Код точно такой же, и я установил CORS на сервере. Ниже мой код. (Есть контроль доступа, но вы можете попробовать без доступа к Token).

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

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

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

Ответы

Ответ 1

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

Ответ 2

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

Проблема заключалась в том, что Safari 7 задал заголовок заголовка Access-Control-Request-Headers "origin, x-request-with", но моя конфигурация AWS CORS разрешала "x-request-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>

Примечание: AllowedOrigin * предназначен только для целей разработки. Дополнительную информацию см. В комментарии @andes ниже.

Ответ 3

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

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

Ответ 4

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

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

У меня также есть проблема с запросом POST Safari, но ответа пока нет. GET в порядке.

Ответ 5

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

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 ошибки, но все они выполняются.

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

Ответ 6

попытайтесь удалить переопределенный тип 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();

Ответ 7

Когда я запрашиваю ваш URL-адрес, я возвращаю следующие заголовки Access-Control:

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

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

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

Access-Control-Allow-Headers: *

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

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

Ответ 8

Что касается Amazon S3, он работал только в сафари после добавления более разрешенных заголовков Content-Type и Range. Один из них выполнил эту работу.

<?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>