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="*" />

然而，当我尝试运行 post 时，它运行ning 一个选项方法和 returns 一个 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 post 的方式的问题，但我们已尝试从 post 发送请求man，它工作正常，尝试使用 jquery 在同一个应用程序中发送 post 请求，它工作正常，所有的 get 请求都工作正常，但由于某种原因，这个 post 导致所有各种问题。

Answer 1

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

Postman 不受 CORS 影响，所以所有请求都有效。
jQuery ajax 使用 XHR (XmlHttpRequest object) 而 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 header 设置为 application/json。当你使用 json() 函数时它会自动生成 ---> body: json(comment)

如果您使用的是 OWIN，则可能需要将 content-type 作为 x-www-form-urlenconded 发送。既然如此，看看这个Post 'x-www-form-urlencoded' content with aurelia-fetch-client

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

Aurelia Post with http-fetch-client producing an options request

api

post

options

cors

aurelia