Как отладить net :: err_failed / 415 Ошибка неподдерживаемого типа носителя при запросе POST? - PullRequest
0 голосов
/ 19 сентября 2019

У нас есть API (созданный внутренним разработчиком из нашей команды), который я пытаюсь использовать в приложении Vue.Ранее я успешно сделал несколько GET запросов к API через axios HTTP-клиент , поэтому я не ожидаю никаких проблем из-за самой платформы.Я пытаюсь следующее:

const data = JSON.stringify(someObject);
axios.post(process.env.VUE_APP_DEV_API_ENDPOINT + `/examination/conclusion`, data)

, который возвращает получает 415 Unsupported Media Type response.Хорошо, заголовки запроса содержат

Accept: application/json, text/plain, */*
Content-Type: application/x-www-form-urlencoded

, в то время как сваггер показывает для этого POST API

possible content types: application/json, application/json-patch+json, application/*+json, text/json

Имеет смысл, я имеюпопытался изменить запрос на

axios.post(process.env.VUE_APP_DEV_API_ENDPOINT + `/examination/conclusion`, data, {
    headers: {
        'Content-Type': 'application/json-patch+json',
    },
})

, но в инструментах разработчика (Vivaldi) вместо "(неудачно)" вместо кода HTTP-запроса и "(неудачно) net :: ERR_FAILED" .. "okИнструменты Chrome для разработчиков показывают, что axios фактически отправляет запрос OPTIONS вместо POST!Почему это?(Консоль Vivaldi говорит, что это POST запрос, который, однако, не выполняется).Запрос является междоменным (с локального хоста на удаленный сервер), и этот (в отличие от запроса, отправляемого без настроек заголовков) также вызывает эту ошибку в консоли:

Доступ к XMLHttpRequest в '[my APIпуть] / экспертиза / заключение «из источника» http://localhost:8081' заблокировано политикой CORS: Ответ на предпечатный запрос не проходит проверку контроля доступа: не имеет статуса HTTP ok.

Если это проблема с CORS, почему я получил 415 без этих заголовков и без жалоб на CORS?Это? Как я могу это исправить? Почему axios отправляет запрос OPTIONS вместо POST?Или это не так, и это особенность инструментов Chrome для разработчиков?Это настолько противоречиво, не знаю, где продолжить ..

Я нашел аналогичный вопрос , но тот не получил ответов ..

PS *

  1. ок, в FireFox также показан второй запрос на отправку запроса OPTIONS, который затем получает ответ 404, и консоль показывает CORSPreflightDidNotSucceed и CORSDidNotSucceed ошибки.Я спросил нашего бэкэнд-разработчика, и они предполагают, что CORS включен для всего приложения, поэтому, скорее всего, это проблема axios.

  2. пара проблем axios, которые могут быть связаны: 2345 , 2083

  3. хм, похоже, что axios ничего не должен делать с этим.

    fetch(process.env.VUE_APP_DEV_API_ENDPOINT + `/examination/conclusion`, {
        method: 'POST',
        body: data
    })
    

    дает тот же 415 ответ,

    fetch(process.env.VUE_APP_DEV_API_ENDPOINT + `/examination/conclusion`, {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        body: data
    })
    

    дает тот же (failed) net::ERR_FAILED результат

  4. выглядит так: этот отвечает на большинство вопросов "Почему?"вопросы, а не "как исправить?"один

  5. этот выглядит более связанным с "как исправить?"аспект (я показал его нашему внутреннему разработчику, посмотрим, поможет ли это)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...