如何解决“类型错误:尝试获取资源时出现网络错误". [英] How to resolve "TypeError: NetworkError when attempting to fetch resource."
问题描述
当我使用 aurelia-fetch-client 将 json 数据发布到服务器时，我收到此错误尝试获取资源时出现类型错误:网络错误."我觉得你的回答对我很有用.
post.html<部分><form role="form" submit.trigger="signup()"><div class="form-group"><label for="OrganisationId">OrganisationId</label><input type="text" value.bind="organisationId" placeholder="OrganisationId">
<div ><label for="OrganisationName">OrganisationName</label><input type="OrganisationName" value.bind="organisationName" placeholder="密码">
<button type="submit" class="btn btn-default">回车</button></表单></节>
post.js
import 'fetch';从aurelia-fetch-client"导入 { HttpClient, json };让 httpClient = 新的 HttpClient();出口类注册{Heading1 = "欢迎用户";组织 ID = "";组织名称 = "";报名() {警报(呼叫")；var myUser1 = { organizationId: this.organisationId, organizationName: this.organisationName }控制台日志(myUser1)；httpClient.fetch('http://172.16.0.26:8085/employee-management/rest/employees/addOrganisations', {方法:POST"，正文:JSON.stringify(myUser1)}).then(response => response.json()).then(数据=> {控制台日志(数据)；});}}这可能与跨域资源共享 (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 的好信息可以在这里找到:请求的资源上不存在 'Access-Control-Allow-Origin' 标头"
希望这至少可以为您指明正确的方向.
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 useful to me.
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.jsimport '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); }); } }
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.
这篇关于如何解决“类型错误:尝试获取资源时出现网络错误".的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
