Javascript Fetch с использованием POST всегда возвращает статус 400

Просто следуя всем примерам в ChatGTP и Google, но мое первое использование выборки JavaScript с помощью POST всегда возвращает 400. (У меня есть выборка с использованием GET, которая работает нормально, поэтому я не понимаю, почему POST не работает.)

Вот код JavaScript для получения:

async function FetchPost() {
    let data = { a: 1, b: 2 };
    let json = JSON.stringify(data);
    try {
        const response = await fetch('/FetchDemo?handler=Fetch',
            {
                method: 'POST',
                // adding mode, cache and credentials did not help
                mode: 'cors', 
                cache: 'no-cache', 
                credentials: 'same-origin', 
                headers: { 'Content-Type': 'application/json' },
                body: json
            });

        if (response.ok) {
            data = await response.json();
        } else {
            throw new exception(response.statusText);
        }
    } catch (error) {
        data = 'Error fetching data:' + error;
    }
    return data;
}

Вот метод OnGet (который работает) и метод OnPost, но он никогда не выполняется. Сетевой журнал в браузере показывает статус 400.

public class FetchDemoModel : PageModel {
    public void OnGet() {
    }
    // This always works
    public IActionResult OnGetFetch(string action, string identity) {
        string data = "";
        switch(action.ToLower()) {
            case "find":
                break;
            default:
                data = "action = " + action + ", identity = " + identity; 
                break;
        }
        return new JsonResult(data);
    }
    // This code is never executed
    public IActionResult OnPostFetch() {
        string data = "";
        return new JsonResult(data);
    }
}

Для полноты и сравнения здесь работает метод GET для получения javascript.

async function FetchGet(action, identity) {
    let data = null;
    try {
        let url = '/FetchDemo?handler=Fetch&action=' + action + "&identity = " + identity;
        const response = await fetch(url,
        {
            method: 'GET',
        });

        if (response.ok) {
            data = await response.json();
        } else {
            throw new exception(response.statusText);
        }
    } catch (error) {
        data = 'Error fetching data:' + error;
    }
    return data;
}

Я проверил все проблемы, которые, по словам Можете ли вы помочь диагностировать это?

Это клиентская или серверная часть? Если это серверная часть, то зачем вы вообще ставите fetch?

Tim Roberts 24.05.2024 05:56

Похоже на какой-то сервер asp.net, но я не знаком с этими методами OnGetFetch и OnGetPost. Как к ним перенаправляются запросы?

Phil 24.05.2024 05:57

Может ли это быть что-то простое, например, вы отправляете тело в POST, но сервер, похоже, не ожидает никакого тела, по крайней мере, не то, что вы показываете в опубликованном вами коде?

Jaromanda X 24.05.2024 06:02

Для запроса POST от клиента браузера требуется наличие соответствующего обработчика POST на сервере.

prasad_ 24.05.2024 06:51
400 Bad Request — может означать, что вы использовали POST, когда сервер принимает только GET. Или это может означать, что параметры сообщения не соответствуют ожиданиям.
fdomn-m 24.05.2024 08:43

Быстрый Google не находит совпадений для «OnPostFetch», так что это похоже на ваш код — так что, возможно, у вас есть маршрутизация на «OnGetFetch», но не на «OnPostFetch».

fdomn-m 24.05.2024 08:47

Что произойдет, если вы удалите/закомментируете OnGet/OnGetFetch? Не удивлюсь, если вы потом получите 404 (или 500, если это нарушит маршрутизацию, так что тоже прокомментируйте это)

fdomn-m 24.05.2024 08:48

это именованные методы-обработчики для страниц Razor.. поскольку они называются OnPostFetch, я думаю, вам нужно передать параметр post handler=Fetch, как вы это сделали в запросе на получение

Diego D 24.05.2024 09:11

Извините, что не упомянул явно, что это приложение страницы asp.net Razor и использует именованные методы-обработчики.

CsharpSqlGuy 24.05.2024 14:23
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
9
68
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В запросе POST отсутствует необходимый токен проверки запроса:

Короче говоря, вы можете отключить проверку запроса для класса PageModel, добавив к нему атрибут IgnoreAntiforgeryToken:

[IgnoreAntiforgeryToken(Order = 10001)]
public class FetchDemoModel : PageModel
{
    ....

Или вы можете создать скрытое поле с помощью помощника Html.AntiForgeryToken в файле представления и включить его в заголовки запроса:

var token = document.querySelector('input[name = "__RequestVerificationToken"]').value;
fetch(..., {
    method: "post",
    headers: {
        "RequestVerificationToken": token
    },
    body: { foo: "bar" }
}).then(() => {
    ...
});

Нет ничего слаще, чем проснуться, проверить свой компьютер и найти ответ на свой вопрос! Я, вероятно, потратил 6 часов, пытаясь решить эту проблему, но безуспешно. Теперь я понимаю, что моей главной проблемой было отсутствие слова БРИТВА, когда я спросил ChatGPT о статусе 400. Спасибо, Майк.

CsharpSqlGuy 24.05.2024 14:29

Другие вопросы по теме