Axios POST работает, но axios.create POST генерирует ошибку 400 Bad Request Error

Фронтенд-фреймворк: React JS

Бэкэнд-фреймворк: Python Flask

Раньше я использовал прокси в package.json "proxy": "https://www.thehostofmyapi.com:6444" (поскольку я подключен по SSH к удаленному серверу моей работы) и совершал вызовы без экземпляра axios, см. ниже:

import axios from 'axios';

axios.post('/api/checks', {foo: 'bar'})
  .then(response => console.log(response));
  .catch(err => console.error(err));
}

все работало нормально, и я отправлял/получал свои данные.

Теперь я создал экземпляр axios:

const axiosInstance = axios.create({
  baseURL: '/api',
  headers: {
    'Content-Type': 'application/json',
  },

  transformRequest: [data => keysToCase(data, snakeCase)],
  responseEncoding: 'utf8',

  validateStatus: status => status === 200 || status === 201,
});

Все работает нормально, когда я делаю запросы GET, но когда я делаю POST, я получаю ошибку 400 Bad Request Error.

Ниже ответ, который я получаю в браузере

data: "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">↵<title>400 Bad Request</title>↵<h1>Bad Request</h1>↵<p>The browser (or proxy) sent a request that this server could not understand.</p>↵"
status: 400
statusText: "Bad Request"

headers:
  access-control-allow-origin: "https://www.thehostofmyapi.com:6444"
  connection: "close"
  content-length: "192"
  content-type: "text/html"
  date: "Fri, 27 Dec 2019 09:20:52 GMT"
  server: "Werkzeug/0.16.0 Python/3.6.9"
  vary: "Origin, Accept-Encoding"
  x-powered-by: "Express"

config:
  url: "/api/checks"
  method: "post"
  data: {mission_id: "5df27777c85c4b639d4862ca"}
  headers:
  Accept: "application/json, text/plain, */*"
  Content-Type: "application/json"

transformRequest: [ƒ]
transformResponse: [ƒ]
timeout: 0
adapter: ƒ xhrAdapter(config)
xsrfCookieName: "XSRF-TOKEN"
xsrfHeaderName: "X-XSRF-TOKEN"
maxContentLength: -1
validateStatus: status => status === 200 || status === 201

request: XMLHttpRequest
onreadystatechange: ƒ handleLoad()
readyState: 4
timeout: 0
withCredentials: false
upload: XMLHttpRequestUpload {onloadstart: null, onprogress: null, onabort: null, onerror: null, onload: null, …}
responseURL: "http://localhost:3000/api/checks"
status: 400
statusText: "Bad Request"
responseType: ""
response: "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">↵<title>400 Bad Request</title>↵<h1>Bad Request</h1>↵<p>The browser (or proxy) sent a request that this server could not understand.</p>↵"
responseText: "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">↵<title>400 Bad Request</title>↵<h1>Bad Request</h1>↵<p>The browser (or proxy) sent a request that this server could not understand.</p>↵"
responseXML: null
onloadstart: null
onprogress: null
onabort: ƒ handleAbort()
onerror: ƒ handleError()
onload: null
ontimeout: ƒ handleTimeout()
onloadend: null

Два заметных поведения:

  1. Когда я помещаю baseURL: 'https://www.thehostofmyapi.com/api' в axios.create и удаляю прокси в package.json:

Я получаю 400, но замечаю, что в журналах сервера появляется запрос OPTION.

  1. Когда я сохраняю прокси в package.json и ставлю baseURL: '/api'

Я все еще получаю 400, но не замечаю запроса OPTION в журналах сервера.

Я слышал о предварительных запросах (очевидно, это вызов OPTION), но почему все работает, когда я не использую axios.create? и как я мог это исправить?


cors axios post http-headers preflight
person DavNej    schedule 27.12.2019    source источник
comment
это не способ показать ошибку .then(err => console.error(err)); это способ .catch(err => console.log(err));   -  person Ifaruki    schedule 27.12.2019
comment
Я знаю, просто опечатка. прости за это   -  person DavNej    schedule 27.12.2019
comment
Есть ли какая-либо трассировка стека в бэкэнде python, когда вы получаете ошибку неправильного запроса (статус 400), можете ли вы поделиться ею?   -  person Vikum Dheemantha    schedule 27.12.2019
comment
Все, что у меня есть, это INFO:werkzeug:10.138.7.214 - - [27/Dec/2019 09:29:37] "POST /checks HTTP/1.1" 400 -   -  person DavNej    schedule 27.12.2019

Ответы (1)


arrow_upward
0
arrow_downward

Мне удалось решить проблему. Я только что избавился от transformRequest и передал его функцию axiosInstance.interceptors.request

const axiosInstance = axios.create({
  baseURL: '/api',
  headers: {
    'Content-Type': 'application/json',
  },

  responseEncoding: 'utf8',

  validateStatus: status => status === 200 || status === 201,
});

axiosInstance.interceptors.request.use(
  config => ({
    ...config,
    data: keysToCase(config.data, snakeCase),
  }),
  error => error,
);
person DavNej    schedule 27.12.2019