How to resolve “TypeError: NetworkError when attempting to fetch resource.”

问题

When I use aurelia-fetch-client to post json data to server and I got this error "TypeError: NetworkError when attempting to fetch resource." I think your answer is very useful to me.

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);
            });
    }
}

回答1:

This is probably related to Cross-Origin Resource Sharing (CORS).

The Cross-Origin Resource Sharing (CORS) mechanism gives web servers cross-domain access controls, which enable secure cross-domain data transfers. Modern browsers use CORS in an API container - such as XMLHttpRequest or Fetch - to mitigate risks of cross-origin HTTP requests. (Source: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

If you have Chrome you could try using Run in Windows with the command: chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security and see if you can run your code in that environment. This will allow access to no 'access-control-allow-origin' header requests.

I tried running parts of your code normally in Chrome, Firefox and Edge and got the same CORS errors. It did however run when I used the above command. You didn't give too much information to go on, but you might have to do some changes server side as well as in your code.

The command above and more good information about CORS can be found here on SO: "No 'Access-Control-Allow-Origin' header is present on the requested resource"

Hopefully this can at least point you in the right direction.

回答2:

My feeling is that it may not be related to CORS. It may have to deal with the "import" mechanism(?) Here is my case: I got a "Source map error" message when I just updated my local version of OpenLayers to v5.0.0. Here is my 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>

and the error message:

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]

Puzzlingly, the JavaScript code works correctly, and the map correctly displays on screen, even before the "Source map error" message on console.

If I turn back to the previous version of OpenLayers, only difference:

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

it works also, but with no error message.

I do not see what to blame ... but Openlayers 5 is the first release intended to be used with "import ... from 'ol'". What I didn't try yet (other issues), I am still using:

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

instead of:

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

I don't know what to blame, but the original question from "Suresh" has also something to do with the "import" mechanism. I my case I cannot see the point with CORS.

来源：https://stackoverflow.com/questions/42719041/how-to-resolve-typeerror-networkerror-when-attempting-to-fetch-resource

标签

aurelia-http-client