Aurelia Post с http-fetch-клиентом производит запрос опций

Question

Я создаю небольшой форум, где люди в нашей компании могут размещать рекламу товаров или услуг, которые они хотят продать на лету, используя aurelia. У меня есть страница со списком объявлений, работающая нормально, страница с подробностями для каждого объявления, работающего нормально, как с использованием запросов get от 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, все они были решены путем добавления тегов AllowCors в API, включая все методы и т. Д.

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

Однако, когда я пытаюсь запустить пост, он запускает метод параметров и возвращает запрос 400 Bad. Вот

Мы также получаем следующую ошибку 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, но прежде чем дать вам несколько возможных решений, я бы хотел показать вам некоторые важные вещи.

• Почтальон не влияет на 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 и разрешить CORS в вашем Startup.cs, Как это:

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

Вам не нужно устанавливать заголовок типа контента для application/json. Это делается автоматически при использовании json() функция ---> body: json(comment)

Если вы используете OWIN, вам может потребоваться отправить тип контента как x-www-form-urlenconded. В этом случае взгляните на содержимое этого поста 'x-www-form-urlencoded' с помощью aurelia-fetch-client