如何解决“TypeError：尝试获取资源时出现网络错误。”

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>

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

这可能与跨源资源共享（CORS）有关。

跨域资源共享（CORS）机制为Web服务器提供跨域访问控制，从而实现安全的跨域数据传输。现代浏览器在 API 容器（例如 XMLHttpRequest 或 Fetch）中使用 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 上找到：“请求的资源上不存在‘Access-Control-Allow-Origin’标头”

希望这至少能为您指明正确的方向。

Answer 2

我想我有点晚了。但我开始知道除了 cors() 之外的一种不同的解决方法。除此之外，我正在使用cors，但我遇到了同样的问题。我通过在submitForm()方法中添加

e.preventDefault();

解决了这个问题。

Answer 3

我的感觉是可能和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 的意义。

Answer 4

在我的例子中，这是一个 CORS 问题，POST 请求被阻止，因为服务器没有在允许的标头请求标头中列出所有需要的标头。在服务器上将“Access-Control-Allow-Headers”设置为“*”就可以了。

Answer 5

我从 fetch 中删除了行

mode:"no-cors"

，错误就消失了。

Answer 6

我强烈建议使用表单功能进行注册。当用

form

替换

div

标签时，它对我来说效果很好，但认真对待安全性很重要。

因此，我的建议是尝试在服务器端处理表单。

如何解决“TypeError：尝试获取资源时出现网络错误。”

问题描述投票：0回答：6

6个回答

最新问题

如何解决“TypeError：尝试获取资源时出现网络错误。”

问题描述 投票：0回答：6

6个回答

最新问题

问题描述投票：0回答：6