aurelia - 如何解决“尝试获取资源时发生TypeError:NetworkError。”

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中运行“运行”，并查看是否可以在该环境中运行代码。这将允许访问任何“ access-control-allow-origin”头请求。

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

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

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