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