TypeError：リソースをフェッチしようとしたときのNetworkErrorを解決する方法

Question

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> 

---->これはおそらく、クロスオリジンリソース共有（CORS）に関連している

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

をpost.js。 chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-securityし、その環境の中で、あなたのコードを実行できるかどうかを確認：

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

あなたがChromeをお持ちの場合は、コマンドを使用して、Windowsで実行]を使用して試みることができます。これにより、 'access-control-allow-origin'ヘッダー要求にはアクセスできなくなります。

通常、Chrome、Firefox、Edgeでコードの一部を実行しようとしましたが、同じCORSエラーが発生しました。しかし、私は上記のコマンドを使用したときに実行されました。あなたは情報をあまりにも多く与えていないが、あなたのコードの中だけでなく、サーバー側も変更しなければならないかもしれない。

CORSについての良い情報がSOにここに見つけることができる上に、よりコマンド："No 'Access-Control-Allow-Origin' header is present on the requested resource"

がうまくいけば、これは、少なくとも正しい方向にあなたを指すことができます。