Question

当我使用aurelia-fetch-client将json数据发布到服务器时，我在尝试获取资源时遇到了此错误＆＃34; TypeError：NetworkError。＆＃34;我认为你的回答对我非常有用。

---＆GT; 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>

----＆GT; 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容器中使用CORS（例如XMLHttpRequest或Fetch）来降低跨源HTTP请求的风险。（来源：https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

如果您使用的是Chrome，则可以尝试使用命令：chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security在Windows中运行，并查看是否可以在该环境中运行代码。这将允许不访问'access-control-allow-origin'标头请求。

我尝试在Chrome，Firefox和Edge中正常运行部分代码，并获得相同的CORS错误。但是当我使用上面的命令时它确实运行了。您没有提供太多信息，但您可能必须在服务器端以及代码中进行一些更改。

上面的命令和有关CORS的更多有关信息可以在SO上找到："No 'Access-Control-Allow-Origin' header is present on the requested resource"

希望这至少可以指出你正确的方向。

Answer 2

我的感觉是它可能与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是第一个旨在与“从...'ol'导入...一起使用”的版本。我尚未尝试的（其他问题），我仍在使用：

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

代替：

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

我不知道该怪什么，但是“ Suresh”最初提出的问题也与“ import”机制有关。就我而言，我看不到CORS的意义。

Answer 3

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

如何在尝试获取资源时解决＆＃34; TypeError：NetworkError。＆＃34;

3 个答案: