Блог

Главная - Вопросы по программированию - Ошибка типа: ошибка сети при попытке извлечения ресурса

Ошибка типа: ошибка сети при попытке извлечения ресурса

#javascript #node.js #webpack

#javascript #node.js #webpack

Вопрос:

Я получаю эту проблему :

 Response { type: "cors", url: "http://localhost:3000/api/marks",
redirected: false, 
status: 200, 
ok: true, 
statusText: "OK", 
headers: Headers, 
body: ReadableStream, 
bodyUsed: true }
MarkService.js:5
Cross-Origin Request Blocked: 
The Same Origin Policy disallows reading the remote resource at      
http://localhost:3000/api/marks. (Reason: CORS request did not succeed).

Вот на что он указывает

 class MarkService {
  constructor() {
    this.URI = `localhost:3000/api/marks`;
  }

  async getMarks() {
    const response = await fetch(this.URI);
    const marks = await response.json();
    return marks;
  }
}
export default MarkService;

Я пытаюсь создать приложение с выражением в бэкэнде и веб-пакетом для интерфейса.
У меня есть Rest API в серверной части, и я не могу использовать его во внешнем интерфейсе.

Я использую Ubuntu с Mozilla Firefox 66.0.2 и Nodejs 11.13.0

Когда я использую консоль, она говорит, что проблема в ней

Комментарии:

1. ошибка вставки завершения

2. Что происходит на вкладке Сеть в инструментах разработки?

3. Попробуйте веб-сайт Google вместо локального хоста один раз.

4. У меня нет никаких попыток подключиться к localhost:3000/ api / marks (где у меня есть Rest API)

5. Я изменил URL на www.google.com и я обнаружил, что он пытается получить localhost:8080/www.google.com

Ответ №1:

Как я вижу для этой ошибки

 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3000/api/marks. (Reason: CORS request did not succeed)

в нем говорится, что произошла ошибка CORS, и это связано с тем, что интерфейс и серверная часть размещены в разных доменах или портах, если на локальном хосте, давайте объясним это немного подробнее.

CORS, что означает совместное использование ресурсов разных источников, — это политика безопасности, которая применяется только к Javascript (браузерам), которая блокирует доступ веб-сайтов к другим веб-сайтам с использованием AJAX, если они явно не одобрены с помощью заголовков.

Чтобы решить эту проблему, вам необходимо передать определенные заголовки в ответе со стороны сервера, который утверждает CORS для запрашивающего домена, заголовков и методов

Вы можете прочитать эту статью для получения глубоких знаний о CORS Или вы можете проверить эту ссылку, чтобы узнать, как решить проблему, с которой вы столкнулись

И есть этот пакет NPM для nodejs, который поможет вам с CORS