Как разрешить междоменные запросы с помощью ESP8266WebServer.h? - Политика CORS: Access-Control-Allow-Origin

json esp8266webserver security

С nodeMCUv2 я хочу:

  • запустить Wi-Fi-сервер с ESP8266WebServer.h
  • обслуживать корневую HTML-страницу, которая будет взаимодействовать с ESP и получать внешние данные

Проблема: Политика CORS: в запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin».

Попытался сделать CORS счастливым одним из следующих способов, но не помогло:

.sendHeader("Access-Control-Allow-Origin", "*");

.enableCORS(true);

#include <ESP8266WebServer.h>
ESP8266WebServer srvAmb(80);
void handleRoot(){
// srvAmb.sendHeader("Access-Control-Allow-Origin", "*");
   srvAmb.enableCORS(true);
   srvAmb.send(200,"text/html; charset=utf-8", myRootWebPagWithJSExternalFetch);
}
void setup(){
...
    srvAmb.on("/", handleRoot);
...

Часть обслуживаемой корневой HTML-страницы:

try{
  const Qresponse = await fetch( "https://zenquotes.io/api/random");
  const Qdata = await Qresponse.json();
  console.log(Qdata);
  ...
} catch (error) {
  console.error(error);
}

Консольный вход в Chromium:

Доступ к извлечению по адресу https://zenquotes.io/api/random из источника 192.... был заблокирован политикой CORS: отсутствует заголовок Access-Control-Allow-Origin. запрошенный ресурс. Если непрозрачный ответ соответствует вашим потребностям, установите режим запроса «no-cors», чтобы получить ресурс с отключенным CORS.

Итак, как получить внешние данные из браузера, работающего на ПК, смартфоне и т. д.?

Спасибо

PS Можно было бы попросить сервер получить данные до предоставления html-страницы, но это не работа сервера esp.

PPS У меня не было права создавать ключевые слова тегов, такие как: fetch, CORS, Allow-Origin, политика

REM: в разделе Как разрешить междоменные запросы на ESP8266WebServer

предполагается, что .sendHeader("Access-Control-Allow-Origin", "*") может быть объявлен устаревшим, но ArduinoIDE не выдает никаких предупреждений; в любом случае предложенное решение не работает.

Исходный код https://github.com/esp8266/ESPWebServer/blob/ master/src/ESP8266WebServer.cpp, метод sendHeader() в строке 238 имеет третий параметр (логический), который, если установлено значение true, помещается перед переданным именем & значение перед уже переданным заголовком, в противном случае оно помещается после, иначе важен декларативный порядок.

А именно, какой допустимый заголовок должен отправить сервер esp?? В частности, есть детали Chromium, говорится:

URL запроса: zenquotes.io/api/random

Метод запроса: GET

Код состояния: 200

Политика реферера: строгое происхождение при перекрестном происхождении

См. также: https://javascript.info/fetch-crossorigin

, 👍0

Обсуждение

Одна вещь, потому что в последнее время я боролся с CORS в другом контексте: вы уверены, что кеш вашего браузера здесь не мешает? У меня была проблема, что настройка разрешения происхождения на * не помогла, но как только я использовал другой браузер (или, в моем случае, новый профиль Firefox), он заработал., @chrisl

@Крисл. НЕТ. Но мне интересно, не имеет ли это ничего общего с тем, что выборка по https, а соединение с ESP по http. ПОЛУЧИТЬ https://zenquotes.io/api/random net::ERR_FAILED 200 https://stackoverflow.com/questions/22665232/what-can-cause-chrome-to-give-an-neterr-failed-on-cached-content-against-a-ser, @user2718593

Подробности в Chromium: указано, что заголовок отсутствует: Запрос на совместное использование ресурсов между источниками (CORS) был заблокирован из-за недопустимых или отсутствующих заголовков ответа запроса или связанного запроса предварительной проверки. ... Статус запроса Предпечатный запрос (если есть проблемы) Проблема с заголовком Недопустимое значение (если доступно) случайно заблокированный заголовок Access-Control-Allow-Origin отсутствует Таким образом, он не работает так, как ожидает Chromium 107. https://web.dev/cross-origin-resource-sharing/?utm_source=devtools и https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS, @user2718593


1 ответ

1

Проблема связана с конкретным URL.

Действительно, если я поменяю API, а именно

const Qresponse = await fetch( "https://zenquotes.io/api/random" );

например:

const Qresponse = await fetch( "https://api.open-meteo.com/v1/meteofrance?latitude=49.71&longitude=4.16&daily=sunset&timezone=Europe%2FBerlin" );

тогда это работает.

Я предполагаю, что я пришел из информации об инструментах сетевой разработки в Chromium:

Политика реферера: строгое происхождение при перекрестном происхождении

утверждая строгое происхождение API zenquotes.io. Мой код сервера esp:

void handleRoot(){
    srvAmb.sendHeader("Access-Control-Allow-Origin", "*", 1);
    srvAmb.send(200,"text/html; charset=utf-8", myRootWebPagWithJSExternalFetch);
}

Примечание: с дополнительным третьим параметром sendHeader() или без него это работает.

,
Смотрите также: