#javascript #angularjs #typescript #asp.net-web-api
Вопрос:
Каждый раз, когда я делаю запрос на извлечение из своего интерфейса, используя следующий код js, я получаю статус 400 «Плохой запрос». В теле ответа есть объект с ошибкой, в котором говорится: «Требуется непустое тело запроса».
Когда я просматриваю раздел запроса на вкладке «Сеть devtools», там написано «для этого запроса нет полезной нагрузки». Так что мне кажется, что он не отправляет раздел тела моей выборки.
Впоследствии он достигает .then()
метода.
Это код машинописного текста:
fetch(`api/person/${person.id}`, {
method: "PUT",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(person)
})
.then(() => this.router.navigate(["/"]))
это серверная часть C# :
[HttpPut("{id}")]
public IActionResult Put(int id, Person person)
{
person.Id = id;
try
{
var updatedPerson = _personRepository.Update(person);
if (updatedPerson != null)
{
return Ok(updatedPerson);
}
return NotFound();
}
catch (ArgumentNullException)
{
return BadRequest();
}
}
Обратите внимание, что запрос даже не доходит до этого контроллера. Никакие точки останова не будут достигнуты, если я поставлю их здесь.
Это одностраничное приложение, которое я запускаю из Visual Studio 2019.
Однако он работает с почтальоном, возвращая код состояния 200 Ok и объект обратно и достигая внутренних точек останова. URL-адрес запроса содержит int id
и тело, содержащее объект Json.
Комментарии:
1. Причина, по которой контроллер не достигнут, вероятно, заключается в наличии промежуточного программного обеспечения для проверки тела запроса. Отправляет ли ваш браузер другой запрос, подобный
Options
Fetch
вашему запросу или вместе с ним, на тот же URL-адрес? Это пахнет так, как будто что-то не так с заголовками, чтобы разрешить телу. См. политику CORS2. @AbrorAbdullaev согласно вкладке Сети он отправляет только PUT. Я не думаю, что еще что — то посылают. Пожалуйста, не могли бы вы подробнее рассказать о том, что я мог бы сделать с политикой CORS? Спасибо.
3. Вы проверили, что javascript person не является нулевым? Вы проверяли инструменты разработчика браузера на наличие ошибок javascript?
4. @Serge Да, я проверил это, и объект person действительно присутствует. У меня есть более подробная информация о том, что произошло, в ответах под другим ответом. Теперь я пришел к выводу, что выполнение запроса с помощью HttpClient от Angular не приводит к ошибке, однако функция выборки делает это.
5. @alalalal Вы проверяли консоль инструментов разработчика браузера? обычно он показывает ошибки javascript
Ответ №1:
Ладно, это не тот вопрос, на который есть четкий ответ. Вот шаги, которые вам, возможно, потребуется предпринять, чтобы узнать:
- Убедитесь, что в вашем запросе на извлечение аргумент person действительно существует, просто выполните console.log(person) перед извлечением
- Убедитесь, что сервер принимает содержимое типа «приложение/json». Хотя в этом случае код ответа должен был быть другим.
- Проверьте заголовки ответов, и являются ли исходные данные back end и front end одинаковыми? Вам нужно увидеть следующее:
Access-Control-Allow-Headers: * Access-Control-Allow-Methods: PUT Access-Control-Allow-Origin: *
Postman работает как собственное приложение на вашем компьютере и имеет другой способ отправки запросов, а не ваш браузер, иногда это приводит к неясным результатам.
Комментарии:
1. Я проверил аргумент, и объект person действительно существует. Ваш третий пункт наиболее важен, у меня нет этих 3 строк в заголовке ответа. Интерфейс и серверная часть работают на локальном хосте:5001 . Я не слишком уверен, как проверить, принимает ли сервер содержимое типа «приложение/json», но я предполагаю, что это соответствует коду ответа.
2. Теперь попробуйте выяснить, не прикрепляется ли тело вашим браузером или не теряется ли оно по пути на сервер? — Попробуйте использовать какую-нибудь другую библиотеку, например axios, для отправки того же запроса, возможно, fetch вызывает проблему.
3. Я попробовал это с помощью HttpClient от Angular, и теперь запрос работает. Что странно. Проблема как-то связана с функцией выборки.
4. @alalal У меня была аналогичная проблема, и в моем случае это было связано с тем, что я не прикрепил заголовки авторизации к запросу. Но если бы это было в вашем случае, вы получили бы другую ошибку. Все еще показывайте свои заголовки, запрос и ответ, возможно, это что-то скажет.
Ответ №2:
Вот способ проверить, что происходит.
- Перейдите на свой основной веб-сайт (http://localhost:5001 или что угодно) в вашем браузере
- Откройте Инструменты разработки браузера (F12 в большинстве браузеров)
- скопируйте / вставьте следующую выборку (код ниже) в консоль разработчика и нажмите
Что происходит? Получаете ли вы данные обратно (распечатанные в консоли)? Это, вероятно, приведет вас к следующему шагу, который вам нужно сделать.
fetch("api/person/1")
.then(response => response.json())
.then(data => console.log(data));
Комментарии:
1. Это запрос на получение. Это просто запрос «Поставить», вызывающий эти проблемы. Я только что вставил этот код в консоль, и он действительно работает.