How to resolve "TypeError: NetworkError when attempting to fetch resource."

Asked 10/3, 2017 at 13:1 Answered 28/3 at 14:32

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

Bibbye answered 10/3, 2017 at 13:1 Comment(0)

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.

Volley answered 12/3, 2017 at 8:54 Comment(0)

I think I am bit late. But I came to know one different workaround except cors(). Besides that I was using cors, but I was facing the same problem. I resolved this issue by adding e.preventDefault(); in submitForm() method.

Chunchung answered 20/1, 2022 at 3:21 Comment(1)

You saved me! I had a dockerized WP that looked almost perfect PHP & JS code wise but had continually gave that error. – Poundal 15/5 at 17:35

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.

Sudan answered 3/7, 2018 at 18:46 Comment(0)

It was a CORS problem in my case, POST request was blocked because server didn't list all needed headers in the allowed headers request header. Setting 'Access-Control-Allow-Headers' to '*' on server did the trick.

Dodecagon answered 19/8, 2020 at 8:44 Comment(0)

I eliminated the line mode:"no-cors" from fetch and the error disappeared.

Babel answered 17/1, 2023 at 19:46 Comment(0)

I highly suggest using the form functionality for signups. When replacing the form tag with div it works fine for me, but it's important to take security seriously.

So trying to handle forms on the server side would be my suggestion.

Part answered 7/12, 2023 at 23:33 Comment(0)

I was also having the same problem.

Using trial and error I found that when I put the submit button outside the <form> <\form> tag it start working.

The <button> tag was causing the issue.

Vaporetto answered 28/3 at 14:32 Comment(0)

Recommended topics

Hot tags