Блокировка чтения из разных источников (CORB)

Я вызвал сторонний API с помощью JQuery AJAX. В консоли появляется следующая ошибка:

Блокировка чтения из разных источников (CORB) заблокировала ответ из разных источников. МОЙ URL с типом MIME application / json. См. Https://www.chromestatus.com/feature/5629709824032768 для получения дополнительных сведений.

Я использовал следующий код для вызова Ajax:

$.ajax({
  type: 'GET',
  url: My Url,
  contentType: 'application/json',
  dataType:'jsonp',
  responseType:'application/json',
  xhrFields: {
    withCredentials: false
  },
  headers: {
    'Access-Control-Allow-Credentials' : true,
    'Access-Control-Allow-Origin':'*',
    'Access-Control-Allow-Methods':'GET',
    'Access-Control-Allow-Headers':'application/json',
  },
  success: function(data) {
    console.log(data);
  },
  error: function(error) {
    console.log("FAIL....=================");
  }
});

Когда я зарегистрировался в Fiddler, я получил данные в ответ, но не в методе успеха Ajax.

Пожалуйста, помогите мне.

 dataType:'jsonp',

Вы делаете запрос JSONP, но сервер отвечает JSON.

Браузер отказывается пытаться рассматривать JSON как JSONP, поскольку это может представлять угрозу безопасности. (Если бы браузер все же попытался обработать JSON как JSONP, это, в лучшем случае, потерпит неудачу).

См. Этот вопрос для получения дополнительной информации о том, что такое JSONP. Обратите внимание, что это неприятный способ обойти ту же политику происхождения, которая использовалась до появления CORS. CORS - гораздо более чистое, безопасное и более эффективное решение проблемы.

Похоже, вы пытаетесь сделать запрос на другой источник и бросаете все, что можете придумать, в одну огромную кучу противоречивых инструкций.

Вы должны понимать, как работает политика одного и того же происхождения.

См. Этот вопрос для получения подробного руководства.

Теперь несколько заметок о вашем коде:

contentType: 'application/json',

• Это игнорируется при использовании JSONP.
• Вы делаете запрос GET. Нет тела запроса для описания типа.
• Это сделает запрос между источниками непростым, а это означает, что помимо основных разрешений CORS вам также необходимо иметь дело с предполетным.

Уберите это.

 dataType:'jsonp',

• Сервер не отвечает с JSONP.

Удали это. (Вместо этого вы можете заставить сервер отвечать JSONP, но CORS лучше).

responseType:'application/json',

Этот вариант не поддерживается jQuery.ajax. Удали это.

xhrFields: {withCredentials: false},

Это значение по умолчанию. Если вы не устанавливаете для него значение true с помощью ajaxSetup, удалите это.

  headers: {
    'Access-Control-Allow-Credentials' : true,
    'Access-Control-Allow-Origin':'*',
    'Access-Control-Allow-Methods':'GET',
    'Access-Control-Allow-Headers':'application/json',
  },

• Это заголовки ответа. Они принадлежат ответу, а не запросу.
• Это сделает запрос между источниками непростым, а это означает, что помимо основных разрешений CORS вам также необходимо иметь дело с предполетным.

В большинстве случаев заблокированный ответ не должен влиять на поведение веб-страницы, и сообщение об ошибке CORB можно безопасно игнорировать. Например, предупреждение может появиться в тех случаях, когда тело заблокированного ответа уже было пустым или когда ответ должен был быть доставлен в контекст, который не может его обработать (например, документ HTML, такой как страница с ошибкой 404 доставляется в тег).

https://www.chromium.org/Home/chromium-security/corb-for-developers

Мне пришлось очистить кеш своего браузера, я читал по этой ссылке, что, если запрос получит пустой ответ, мы получим это предупреждение об ошибке. Я получал CORS по моему запросу, и поэтому ответ на этот запрос стал пустым. Все, что мне нужно было сделать, это очистить кеш браузера, и CORS ушел. Я получал CORS, потому что хром сохранил номер ПОРТА в кеше, сервер просто согласился, localhost:3010и я делал это localhost:3002из-за кеша.

Вернуть ответ с заголовком «Access-Control-Allow-Origin: *». Проверьте код ниже для ответа сервера Php.

<?php header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');
echo json_encode($phparray); 

Вам необходимо добавить CORS на стороне сервера:

Если вы используете nodeJS, тогда:

Сначала вам нужно установить cors с помощью следующей команды:

npm install cors --save

Теперь добавьте следующий код в стартовый файл вашего приложения, например ( app.js or server.js)

var express = require('express');
var app = express();

var cors = require('cors');
var bodyParser = require('body-parser');

//enables cors
app.use(cors({
  'allowedHeaders': ['sessionId', 'Content-Type'],
  'exposedHeaders': ['sessionId'],
  'origin': '*',
  'methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
  'preflightContinue': false
}));

require('./router/index')(app);

Это не ясно из вопроса, но при условии, что это что-то происходит на клиенте разработки или тестирования, и учитывая, что вы уже используете Fiddler, вы можете получить ответ Fiddler разрешающим ответом:

• Выберите проблемный запрос в Fiddler
• Откройте AutoResponderвкладку
• Щелкните Add Ruleи измените правило, чтобы:
  • Метод: здесь URL-адрес сервера OPTIONS , напримерMethod:OPTIONS http://localhost
  • *CORSPreflightAllow
• Проверьте Unmatched requests passthrough
• Проверьте Enable Rules

Пара заметок:

1. Очевидно, что это только решение для разработки / тестирования, когда невозможно / нецелесообразно изменять службу API.
2. Убедитесь, что любые соглашения, заключенные у вас со сторонним поставщиком API, позволяют это делать.
3. Как отмечали другие, это часть того, как работает CORS, и в конечном итоге заголовок необходимо будет установить на сервере API. Если вы контролируете этот сервер, вы можете установить заголовки самостоятельно. В этом случае, поскольку это сторонняя служба, я могу только предположить, что у них есть какой-то механизм, с помощью которого вы можете предоставить им URL-адрес исходного сайта, и они соответственно обновят свою службу, чтобы ответить с правильными заголовками.

Если вы работаете на localhost, попробуйте это, это единственное расширение и метод, который работал у меня (Angular, только javascript, без php)

https://chrome.google.com/webstore/detail/moesif-orign-cors-changer/digfbfaphojjndkpccljibejjbppifbc/related?hl=en

вы пробовали изменить dataTypeв своем запросе ajax с jsonpна json? это исправило это в моем случае.

В расширении Chrome вы можете использовать

chrome.webRequest.onHeadersReceived.addListener

переписать заголовки ответа сервера. Вы можете заменить существующий заголовок или добавить дополнительный заголовок. Это тот заголовок, который вам нужен:

Access-Control-Allow-Origin: *

https://developers.chrome.com/extensions/webRequest#event-onHeadersReceived

Я застрял на проблемах CORB, и это решило для меня.

Заголовки ответа обычно устанавливаются на сервере. Установите 'Access-Control-Allow-Headers'на 'Content-Type'на стороне сервера

Блокировка чтения из разных источников (CORB), алгоритм, с помощью которого веб-браузеры могут идентифицировать и блокировать загрузку ресурсов из разных источников до того, как они достигнут веб-страницы. Он предназначен для предотвращения доставки браузером определенных сетевых ответов из разных источников. на веб-страницу.

Сначала убедитесь, что эти ресурсы обслуживаются с правильным " Content-Type", т. Е. Для типа MIME JSON - " text/json", " application/json", типа MIME HTML - " text/html".

Во-вторых: установите режим на cors, т.е. mode:cors

Получение будет выглядеть примерно так

 fetch("https://example.com/api/request", {
            method: 'POST',
            body: JSON.stringify(data),
            mode: 'cors',
            headers: {
                'Content-Type': 'application/json',
                "Accept": 'application/json',
            }
        })
    .then((data) => data.json())
    .then((resp) => console.log(resp))
    .catch((err) => console.log(err))

ссылки: https://chromium.googlesource.com/chromium/src/+/master/services/network/cross_origin_read_blocking_explainer.md

https://www.chromium.org/Home/chromium-security/corb-for-developers

В этом контексте стоит упомянуть крайний случай: Chrome (по крайней мере, в некоторых версиях) проверяет предварительные рейсы CORS, используя алгоритм, настроенный для CORB . ИМО, это немного глупо, потому что предполетные операции, похоже, не влияют на модель угроз CORB, а CORB, похоже, разработан ортогонально CORS. Кроме того, тело предварительной проверки CORS недоступно, поэтому нет никаких негативных последствий, только раздражающее предупреждение.

В любом случае убедитесь, что ваши предварительные ответы CORS (ответы метода OPTIONS) не имеют тела (204) . Пустой 200 с типом содержимого application / octet-stream и нулевой длиной здесь тоже хорошо работал.

Вы можете подтвердить, действительно ли это так, посчитав предупреждения CORB и ответы OPTIONS с телом сообщения.

Похоже, это предупреждение возникло при отправке пустого ответа с 200.

Эта конфигурация в моем .htaccessотображении предупреждения в Chrome:

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST,GET,HEAD,OPTIONS,PUT,DELETE"
Header always set Access-Control-Allow-Headers "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, Authorization"

RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule .* / [R=200,L]

Но изменив последнюю строку на

RewriteRule .* / [R=204,L]

решить вопрос!

У меня была такая же проблема с расширением Chrome. Когда я попытался добавить в свой манифест опцию content_scripts эту часть:

//{
    //  "matches": [ "<all_urls>" ],
    //  "css": [ "myStyles.css" ],
    //  "js": [ "test.js" ]
    //}

А другую часть я удаляю из манифеста "разрешений":

"https://*/"

Только когда я удаляю его CORB в одном из моих запросов XHR, разочаровывается.

Хуже всего то, что в моем коде мало запросов XHR, и только один из них начинает получать ошибку CORB (почему CORB не отображается на другом XHR, я не знаю; почему явные изменения вызвали эту ошибку, я не знаю). Вот почему я проверял весь код снова и снова через несколько часов и потерял много времени.

Если вы делаете это в сафари, это не займет много времени. Просто включите меню разработчика в разделе «Настройки» >> «Конфиденциальность» и снимите флажок «Отключить ограничения для разных источников» в меню разработки. Если вы хотите только локальный, вам нужно только включить меню разработчика и выбрать «Отключить локальные ограничения файлов» в меню разработки.

а в Chrome для OSX откройте Терминал и запустите:

$ open -a Google\ Chrome --args --disable-web-security --user-data-dir

--user-data-dir требуется в Chrome 49+ на OSX

Для запуска Linux:

$ google-chrome --disable-web-security

Также, если вы пытаетесь получить доступ к локальным файлам для целей разработки, таких как AJAX или JSON, вы также можете использовать этот флаг.

-–allow-file-access-from-files

Для Windows войдите в командную строку, перейдите в папку, где находится Chrome.exe, и введите

chrome.exe --disable-web-security

Это должно отключить ту же политику происхождения и позволить вам получить доступ к локальным файлам.

Я столкнулся с этой проблемой, потому что формат ответа jsonp от сервера неправильный. Неправильный ответ выглядит следующим образом.

callback(["apple", "peach"])

Проблема в том, что объект внутри callbackдолжен быть правильным объектом json, а не массивом json. Поэтому я изменил код сервера и изменил его формат:

callback({"fruit": ["apple", "peach"]})

Браузер с радостью принял ответ после модификации.

Попробуйте установить расширение «Moesif CORS», если вы столкнулись с проблемой в Google Chrome. Поскольку это запрос с перекрестным происхождением, хром не принимает ответ, даже если код состояния ответа равен 200