带有 http-fetch-client 的 Aurelia Post 产生一个选项请求 [英] Aurelia Post with http-fetch-client producing an options request

问题描述

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

I'm creating a small forum where people in our company can put up adverts for goods or services they want to sell on the fly, using aurelia. I have a list of adverts page working fine, a details page for each advert working fine both using get requests from an api. However i can't seem to get the work the Post reqeust when someone wants to add a comment on an advert.

@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 标签解决了所有问题，包括所有方法等.

Doing this project we've had some issue with CORS, all solved by adding in AllowCors tags in the api, including all methods etc.

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

但是，当我尝试运行该帖子时，它会运行一个选项方法并返回一个 400 Bad 请求.这里

However when i try and run the post, its running an options method and returns a 400 Bad request. Here

我们还收到以下 CORS 错误:

We also get the following CORS error:

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 请求工作正常，但由于某种原因，这篇文章导致了各种各样的问题.

I don't know if it's a problem with our c# api or with how I'm trying to post from aurelia, but we have tried sending requests from postman and it works fine, tried sending post request within the same app using jquery and it works fine, and all the get requests work fine, but for some reason this post is causing all sorts of problems.

推荐答案

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

It seems to be a problem in your WebAPI, but before giving you some possible solutions I'd like to show you some important things.

• 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

• Postman is not affected by CORS, so all requests work.
• jQuery ajax uses XHR (XmlHttpRequest object) while aurelia-fetch-client uses fetch (window.fetch. However, the fetch-polyfill uses XHR in the background). They are different approaches to solve the same problem. Just because one of them work, doesn't actually mean that the other one should work too.
• The OPTIONS request is made by fetch, that's how it works. More information here https://developers.google.com/web/updates/2015/03/introduction-to-fetch?hl=en

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

To solve this problem try to remove those tags from web.config, and allow CORS in your Startup.cs. Like this:

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

您不必将内容类型标头设置为 application/json.使用 json() 函数时自动生成 ---> body: json(comment)

You don't have to set the content-type header to application/json. It is automatically made when you use the json() function ---> body: json(comment)

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

If you are using OWIN you might have to send the content-type as x-www-form-urlenconded. In that case, take a look at this Post 'x-www-form-urlencoded' content with aurelia-fetch-client

这篇关于带有 http-fetch-client 的 Aurelia Post 产生一个选项请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！