Axios POST 有效，但 axios.create POST 生成 400 Bad Request Error答案

【问题标题】：Axios POST works but axios.create POST generate 400 Bad Request ErrorAxios POST 有效，但 axios.create POST 生成 400 Bad Request Error
【发布时间】：2020-04-17 07:39:20
【问题描述】：

前端框架：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

两个明显的行为：

当我将baseURL: 'https://www.thehostofmyapi.com/api' 放入axios.create 并删除package.json 中的代理时：

我得到一个 400 但注意到一个 OPTION 请求出现在服务器的日志中

当我将代理保存在 package.json 中并放入 baseURL: '/api'

我仍然收到 400，但注意到服务器日志中没有 OPTION 请求

我听说过预检请求（显然是 OPTION 调用），但是当我不使用 axios.create 时，为什么一切正常？我该如何解决这个问题？

【问题讨论】：

这不是显示错误的方式.then(err => console.error(err));这是方式.catch(err => console.log(err));
我知道，只是一个错字。对此感到抱歉
当你收到错误请求（状态 400）错误时，python 后端是否有任何堆栈跟踪，你能分享一下吗？
我只有INFO:werkzeug:10.138.7.214 - - [27/Dec/2019 09:29:37] "POST /checks HTTP/1.1" 400 -

标签： post cors http-headers axios preflight

【解决方案1】：

我设法解决了这个问题。我刚刚摆脱了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,
);

【讨论】：