Блокування зчитування між походженнями (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та відредагуйте правило, щоб:
  • Метод: тут опція сервера OPTIONS , напрMethod:OPTIONS http://localhost
  • *CORSPreflightAllow
• Перевірка Unmatched requests passthrough
• Перевірка Enable Rules

Пара зазначає:

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

Якщо ви працюєте над localhost, спробуйте це, це єдине розширення та метод, який працював для мене (Angular, only javascript, no php)

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

ви намагалися змінити 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", тобто для типу 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

У цьому контексті варто згадати кращий випадок: Chrome (принаймні, деякі версії) перевіряє попередні перегляди CORS за допомогою алгоритму, встановленого для CORB . ІМО, це дещо нерозумно, тому що попередні проблиски, здається, не впливають на модель загрози CORB, а CORB, здається, ортогональний для CORS. Крім того, до корпусу передпольоту CORS недоступний, тому немає негативного наслідку лише дратує попередження.

У будь-якому разі переконайтесь, що відповіді на передпольотні CORS (відповіді методу OPTIONS) не мають тіла (204) . Тут також добре працював порожній 200 з додатком типу вмісту / октет-потоком і довжиною нульовою.

Ви можете підтвердити, якщо це так, в який ви потрапляєте, підраховуючи попередження 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" ]
    //}

А іншу частину я видаляю зі свого явного "permissons":

"https://*/"

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

Найгірше те, що в моєму коді є декілька запитів XHR, і лише один з них починає отримувати помилку CORB (чому CORB не одягається на інші XHR, я не знаю; чому явні зміни прикутували цю помилку, я не знаю). Ось чому я перевіряв весь код знову і знову на кілька годин і втрачав багато часу.

Якщо ви робите це в сафарі, це не займе часу, просто увімкніть меню розробника з Налаштування >> Конфіденційність та зніміть позначку "Вимкнути обмеження між походженням" у меню розробки. Якщо ви хочете лише локально, вам потрібно лише ввімкнути меню розробника та вибрати "Вимкнути обмеження для локальних файлів" у меню розробки.

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

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

- користувач-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