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

Question

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

Answer 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.