Как решить "TypeError: NetworkError при попытке извлечь ресурс".
Когда я использую aurelia-fetch-client для отправки данных json на сервер, я получаю эту ошибку "TypeError: NetworkError при попытке извлечь ресурс". Я думаю, что ваш ответ очень полезен для меня.
---> post.html
<template>
<section>
<form role="form" submit.trigger="signup()">
<div class="form-group">
<label for="OrganisationId">OrganisationId</label>
<input type="text" value.bind="organisationId" placeholder="OrganisationId">
</div>
<div >
<label for="OrganisationName">OrganisationName</label>
<input type="OrganisationName" value.bind="organisationName" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Enter</button>
</form>
</section>
</template>
----> post.js
import 'fetch';
import {HttpClient, json} from 'aurelia-fetch-client';
let httpClient = new HttpClient();
export class signup{
heading1 ="Welome to User";
organisationId ="";
organisationName ="";
signup ()
{
alert("calliong");
var myUser1 = { organisationId: this.organisationId, organisationName: this.organisationName }
console.log(myUser1);
httpClient.fetch('http://172.16.0.26:8085/employee-management/rest/employees/addOrganisations', {
method: "POST",
body: JSON.stringify(myUser1)
})
.then(response => response.json())
.then(data => {
console.log(data);
});
}
}
5 ответов
Вероятно, это связано с распределением ресурсов между источниками (CORS).
Механизм общего доступа к ресурсам между источниками (CORS) предоставляет веб-серверам средства управления междоменным доступом, которые обеспечивают безопасную междоменную передачу данных. Современные браузеры используют CORS в контейнере API - таком как XMLHttpRequest или Fetch - для снижения рисков HTTP-запросов между источниками. (Источник: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
Если у вас есть Chrome, вы можете попробовать запустить в Windows команду: chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security и посмотрите, сможете ли вы запустить свой код в этой среде. Это позволит получить доступ к запросам заголовка "access-control-allow-origin".
Я попытался запустить части вашего кода нормально в Chrome, Firefox и Edge и получил те же ошибки CORS. Однако он запустился, когда я использовал вышеуказанную команду. Вы не дали слишком много информации для продолжения, но вам, возможно, придется внести некоторые изменения на стороне сервера, а также в своем коде.
Приведенная выше команда и более полезная информация о CORS можно найти здесь, в SO: "В запрашиваемом ресурсе отсутствует заголовок" Access-Control-Allow-Origin ""
Надеюсь, это может, по крайней мере, указать вам правильное направление.
Думаю, я немного опоздал. Но я узнал об одном другом обходном пути, кроме cors(). Кроме того, я использовал cors, но столкнулся с той же проблемой. Я решил эту проблему, добавив
Я чувствую, что это не может быть связано с CORS. Возможно, он имеет дело с механизмом "импорта" (?). Вот мой случай: я получил сообщение "Ошибка карты источника", когда я только что обновил свою локальную версию OpenLayers до v5.0.0. Вот мой HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lignes SNCF</title>
<link rel="stylesheet" href="sncf.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/5.0.0/ol.css">
<link rel="preload" href="Gares.json">
<link rel="preload" href="communes.geojson">
<script src="../../../ENSEIGNEMENT/v5.0.0-dist/ol.js"></script>
</head>
<body>
<h1>Lignes SNCF</h1>
<div id="canvasMap" class="map"><div id="popup"></div></div>
<script src="./sncfV5.js"></script>
</body>
</html>
и сообщение об ошибке:
Source map error: TypeError: NetworkError when attempting to fetch resource.
Resource URL: file:///E:/ENSEIGNEMENT/v5.0.0-dist/ol.js
Source Map URL: ol.js.map[Learn More]
Удивительно, но код JavaScript работает правильно, и карта корректно отображается на экране, даже до того, как на консоли появилось сообщение "Ошибка карты источника".
Если я вернусь к предыдущей версии OpenLayers, разница только в следующем:
<script src="../../../ENSEIGNEMENT/v4.6.5-dist/ol.js"></script>
это работает также, но без сообщения об ошибке.
Я не вижу, в чем виноват... но Openlayers 5 - первый релиз, предназначенный для использования с "import ... from 'ol". То, что я еще не пробовал (другие проблемы), я все еще использую:
const map = new ol.Map(...);
вместо:
import Map from 'ol.Map.js';
const map = new Map(...);
Я не знаю, в чем винить, но оригинальный вопрос из "Суреша" также имеет отношение к механизму "импорта". В моем случае я не вижу смысла с CORS.
В моем случае это была проблема CORS, запрос POST был заблокирован, потому что сервер не перечислил все необходимые заголовки в заголовке запроса разрешенных заголовков. Установка "Access-Control-Allow-Headers" на "*" на сервере сработала.