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

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

Вам необходимо добавить 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);

In most cases, the blocked response should not affect the web page's behavior and the CORB error message can be safely ignored. For example, the warning may occur in cases when the body of the blocked response was empty already, or when the response was going to be delivered to a context that can't handle it (e.g., a HTML document such as a 404 error page being delivered to an tag).

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

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

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

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

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

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

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

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

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

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

Блокировка чтения из разных источников (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.info(resp))
    .catch((err) => console.info(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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

"https://*/"

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

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

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

chrome.webRequest.onHeadersReceived.addListener

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

Access-Control-Allow-Origin: *

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

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

У меня аналогичная проблема. Мой случай связан с тем, что contentType ответа сервера - это application / json, а не text / javascript.

Итак, я решаю это со своего сервера (spring mvc):

// http://127.0.0.1:8080/jsonp/test?callback=json_123456
    @GetMapping(value = "/test")
    public void testJsonp(HttpServletRequest httpServletRequest,
                          HttpServletResponse httpServletResponse,
                          @RequestParam(value = "callback", required = false) String callback) throws IOException {
        JSONObject json = new JSONObject();
        json.put("a", 1);
        json.put("b", "test");
        String dataString = json.toJSONString();

        if (StringUtils.isBlank(callback)) {
            httpServletResponse.setContentType("application/json; charset=UTF-8");
            httpServletResponse.getWriter().print(dataString);
        } else {
            // important: contentType must be text/javascript
            httpServletResponse.setContentType("text/javascript; charset=UTF-8");
            dataString = callback + "(" + dataString + ")";
            httpServletResponse.getWriter().print(dataString);
        }
    }