How to resolve “TypeError: NetworkError when attempting to fetch resource.”

前端未结

关注

 3  1065

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 u

相关标签:

3条回答

名媛妹妹

2021-01-04 14:04

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...
有刺的猬

2021-01-04 14:04

It was a CORS problem in my case, POST request was blocked because server didn't list all needed headers in the allowed headers request header. Setting 'Access-Control-Allow-Headers' to '*' on server did the trick.

0 讨论(0)
发布评论:

提交评论
- 加载中...
萌比男神i

2021-01-04 14:16
My feeling is that it may not be related to CORS. It may have to deal with the "import" mechanism(?) Here is my case: I got a "Source map error" message when I just updated my local version of OpenLayers to v5.0.0. Here is my 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>
```
and the error message:
```
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]
```
Puzzlingly, the JavaScript code works correctly, and the map correctly displays on screen, even before the "Source map error" message on console.

If I turn back to the previous version of OpenLayers, only difference:
```
<script src="../../../ENSEIGNEMENT/v4.6.5-dist/ol.js"></script>
```
it works also, but with no error message.

I do not see what to blame ... but Openlayers 5 is the first release intended to be used with "import ... from 'ol'". What I didn't try yet (other issues), I am still using:
```
const map = new ol.Map(...);
```
instead of:
```
import Map from 'ol.Map.js';
const map = new Map(...);
```
I don't know what to blame, but the original question from "Suresh" has also something to do with the "import" mechanism. I my case I cannot see the point with CORS.
0 讨论(0)
发布评论:

提交评论
- 加载中...