Блокировка чтения перекрестного происхождения (CORB)

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

Блокировка чтения Cross-Origin (CORB) заблокировала ответ с перекрестного происхождения MY URL с приложением MIME-типа /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.

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

Ответ 1

 dataType:'jsonp',

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

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

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

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

Вы должны понимать, как работает политика Same Origin.

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

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

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 вам также необходимо иметь дело с предполетным полетом.

Ответ 2

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

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

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

Ответ 3

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

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

Ответ 4

Вы должны добавить 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);

Ответ 5

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

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

Пара отмечает:

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

Ответ 6

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

Ответ 7

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

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

Ответ 8

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

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

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

Ответ 9

Похоже, это предупреждение возникло при отправке пустого ответа с 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]

решить проблему!

Ответ 10

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

Ответ 11

Чтобы продемонстрировать, как ваш JS может работать правильно, вы можете запустить Chrome в небезопасном режиме

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

Но "Блокировка чтения" (CORB) заблокировала ответ с перекрестного происхождения " должна быть исправлена на стороне сервера.

Ответ 12

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

Сначала убедитесь, что эти ресурсы снабжены правильным " Content-Type ", т.е. Для типа JSON MIME - " text/json ", " application/json ", тип HTML MIME - " 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

Ответ 13

Вы не можете вызывать сторонние API напрямую из клиентской части вашего интерфейса. для звонков, которые вам нужно внести изменения в сервер, но вы не можете сделать. В браузере вы получите нормальный ответ, но из кода Js вы не получите ответ. Попробуйте эту ссылку иди сюда

Ответ 14

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

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

И я удаляю другую часть из моего манифеста "permissons":

"https://*/"

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

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

Ответ 15

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

и в 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

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

Ответ 16

Я использую сервер Apache и добавил следующие Header's в мой Directory VirtualHost

    <Directory /var/www/>
            Options Indexes FollowSymLinks MultiViews
            AllowOverride All
            Order allow,deny
            allow from all
            Header add Access-Control-Allow-Origin "*"
            Header add Access-Control-Allow-Methods "GET"
            Header add Access-Control-Allow-Headers "application/json"
    </Directory>

Ответ 17

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

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

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

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

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

Ответ 18

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