web-dev-qa-db-ja.com

「TypeError：リソースを取得しようとしたときのNetworkError」を解決する方法

Aurelia-fetch-clientを使用してjsonデータをサーバーに送信すると、「TypeError：NetworkError when try to resource。」というエラーが発生しました。あなたの答えは私にとって非常に役立つと思います。

  • 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

これはおそらく、クロスオリジンリソースシェアリング（CORS）に関連しています。

Cross-Origin Resource Sharing（CORS）メカニズムは、Webサーバーにクロスドメインアクセス制御を提供し、これにより安全なクロスドメインデータ転送が可能になります。最新のブラウザは、XMLHttpRequestやFetchなどのAPIコンテナでCORSを使用して、クロスオリジンHTTPリクエストのリスクを軽減します。 （ソース： https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Chromeがある場合は、次のコマンドでWindowsで実行を使用してみてください：chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-securityそして、その環境でコードを実行できるかどうかを確認します。これにより、「access-control-allow-Origin」ヘッダー要求へのアクセスが許可されなくなります。

通常、Chrome、Firefox、Edgeでコードの一部を実行しようとしましたが、同じCORSエラーが発生しました。ただし、上記のコマンドを使用すると実行されました。あまり多くの情報を提供することはありませんでしたが、コードだけでなくサーバー側でいくつかの変更を行う必要があるかもしれません。

上記のコマンドとCORSに関するより良い情報は、SOにあります： "No 'Access-Control-Allow-Origin' header is present on the requested resource"

これが少なくとも正しい方向にあなたを向けることができれば幸いです。

5
greensponge

私の考えでは、CORSとは関係ないかもしれません。 「インポート」メカニズム（？）を処理する必要があるかもしれません。ここに私のケースがあります。OpenLayersのローカルバージョンをv5.0.0に更新したときに「ソースマップエラー」メッセージが表示されました。これが私の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>

エラーメッセージ：

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]

不可解なことに、JavaScriptコードは正しく機能し、コンソールの「ソースマップエラー」メッセージの前でも、マップは画面に正しく表示されます。

OpenLayersの前のバージョンに戻ると、唯一の違いは次のとおりです。

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

動作しますが、エラーメッセージは表示されません。

私は何を責めるかわかりませんが、Openlayers 5は「import ... from 'ol'」で使用することを目的とした最初のリリースです。まだ試していないこと（他の問題）、私はまだ使用しています：

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

の代わりに：

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

私は何を責めるべきかわかりませんが、「Suresh」からの元の質問は「インポート」メカニズムとも関係があります。私の場合、CORSでポイントを確認できません。

2
allez l'OM