web-dev-qa-db-fra.com

Comment résoudre «TypeError: NetworkError lors d'une tentative de récupération de ressource».

Lorsque j'utilise aurelia-fetch-client pour publier des données json sur le serveur et que je reçois cette erreur "TypeError: NetworkError lors d'une tentative de récupération de ressource". Je pense que votre réponse m'est très utile.

  • 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);
            });
    }
}
aurelia
5
Suresh Kopparthi

Ceci est probablement lié au partage de ressources d'origine croisée (CORS).

Le mécanisme CORS (Cross-Origin Resource Sharing) offre aux serveurs Web des contrôles d'accès inter-domaines, qui permettent des transferts de données inter-domaines sécurisés. Les navigateurs modernes utilisent CORS dans un conteneur d'API - comme XMLHttpRequest ou Fetch - pour atténuer les risques de requêtes HTTP d'origine croisée. (Source: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Si vous avez Chrome vous pouvez essayer d'utiliser Exécuter dans Windows avec la commande: chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security et voyez si vous pouvez exécuter votre code dans cet environnement. Cela permettra l'accès à aucune demande d'en-tête "access-control-allow-Origin".

J'ai essayé d'exécuter des parties de votre code normalement dans Chrome, Firefox et Edge et j'ai obtenu les mêmes erreurs CORS. Il a cependant fonctionné lorsque j'ai utilisé la commande ci-dessus. Vous n'avez pas donné trop d'informations pour continuer, mais vous devrez peut-être effectuer quelques modifications côté serveur ainsi que dans votre code.

La commande ci-dessus et plus de bonnes informations sur CORS peuvent être trouvées ici sur SO: "Aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur la ressource demandée"

Espérons que cela puisse au moins vous orienter dans la bonne direction.

5
greensponge

Mon sentiment est que cela peut ne pas être lié à CORS. Il peut avoir à gérer le mécanisme "d'importation" (?) Voici mon cas: j'ai reçu un message "Erreur de carte source" lorsque je viens de mettre à jour ma version locale d'OpenLayers vers la version 5.0.0. Voici mon 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>

et le message d'erreur:

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]

Curieusement, le code JavaScript fonctionne correctement et la carte s'affiche correctement à l'écran, avant même le message "Erreur de carte source" sur la console.

Si je reviens à la version précédente d'OpenLayers, seule différence:

<script src="../../../ENSEIGNEMENT/v4.6.5-dist/ol.js"></script>

cela fonctionne aussi, mais sans message d'erreur.

Je ne vois pas de quoi blâmer ... mais Openlayers 5 est la première version destinée à être utilisée avec "import ... from 'ol'". Ce que je n'ai pas encore essayé (autres problèmes), j'utilise toujours:

const map = new ol.Map(...);

au lieu de:

import Map from 'ol.Map.js';
const map = new Map(...);

Je ne sais pas quoi blâmer, mais la question d'origine de "Suresh" a aussi quelque chose à voir avec le mécanisme "d'importation". Je mon cas, je ne vois pas le point avec CORS.

2
allez l'OM