Aurelia Post 使用 http-fetch-client 生成选项请求

Question

我正在创建一个小型论坛，我们公司的员工可以使用 aurelia 在其中发布他们想要销售的商品或服务的广告。我有一个广告页面列表工作正常，每个广告的详细信息页面都使用来自 api 的获取请求工作正常。但是，当有人想对广告添加评论时，我似乎无法获得 Post 请求的工作。

@inject(HttpClient)
export class ApiData {
    constructor(httpClient) {
        httpClient.configure(config => {
            config
                .withBaseUrl("MyUrl");
        });
        this.http = httpClient;
        //.configure(x => {x.withHeader('Content-Type', 'application/json');});
    }

    postAdvertComment(comment, id) {
        return this.http.fetch(`/adverts/${id}/comments`, {
            method: "post",
            body: json(comment),
            headers: {
                'Accept': 'application/json'
            }
        });
    } 

    getAdverts() {
        return this.http.fetch("/adverts")
            .then(response => {
                return this.adverts = response.json();
            });
    }

    getAdvert(id) {
        return this.http.fetch(`/adverts/${id}`)
            .then(response => {
                return this.advert = response.json();
            });
    }
}

在做这个项目时，我们遇到了一些 CORS 问题，所有问题都通过在 api 中添加 AllowCors 标签来解决，包括所有方法等。

<add key="CorsAllowedOrigins" value="*" />
<add key="CorsAllowedHeaders" value="" />
<add key="CorsAllowedMethods" value="*" />

但是，当我尝试运行该帖子时，它会运行选项方法并返回 400 Bad 请求。 Here

我们还收到以下 CORS 错误：

Fetch API cannot load MyURL/api/adverts/2/comments. Response to preflight
request doesn't pass access control check: No 'Access-Control-Allow-Origin'
header is present on the requested resource. Origin 'http://localhost:49877' is 
therefore not allowed access. The response had HTTP status code 400. If an 
opaque response serves your needs, set the request's mode to 'no-cors' to fetch 
the resource with CORS disabled.

我不知道这是否是我们的 c# api 或我尝试从 aurelia 发布的方式有问题，但我们已经尝试从邮递员发送请求并且它工作正常，尝试使用在同一个应用程序中发送发布请求jquery，它工作正常，所有的 get 请求工作正常，但由于某种原因，这篇文章引起了各种各样的问题。

Answer 1

这似乎是您的 WebAPI 中的一个问题，但在为您提供一些可能的解决方案之前，我想向您展示一些重要的事情。

• Postman 不受 CORS 影响，因此所有请求都有效。
• jQuery ajax 使用 XHR（XmlHttpRequest 对象），而 aurelia-fetch-client 使用 fetch（window.fetch。但是，fetch-polyfill 在后台使用 XHR）。他们是 解决同一问题的不同方法。仅仅因为其中一个有效，并不意味着另一个也应该有效。
• OPTIONS 请求是由 fetch 发出的，这就是它的工作原理。更多信息在这里https://developers.google.com/web/updates/2015/03/introduction-to-fetch?hl=en

要解决此问题，请尝试从 web.config 中删除这些标签，并在您的 Startup.cs 中允许 CORS。像这样：

public void Configuration(IAppBuilder app)
{
    app.UseCors(CorsOptions.AllowAll); //or another parameter
    //rest of your code
}

您不必将 content-type 标头设置为 application/json。使用json()函数时自动生成--->body: json(comment)

如果您使用的是 OWIN，您可能必须将内容类型发送为 x-www-form-urlenconded。在这种情况下，看看这个Post 'x-www-form-urlencoded' content with aurelia-fetch-client