it-roy-ru.com

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

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

Блокировка перекрестного чтения (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.

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

34
Jignesh

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

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

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

10
Marcelo Rafael

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

3
Cla

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

3
lifetimeLearner007

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

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

Пара замечаний:

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

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

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

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

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

    <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>
0
Jacksonkr

Блокировка перекрестного чтения (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

0
Nikil Munireddy