Question

前端框架：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错误的请求错误。

下面，我在浏览器中收到的响应

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时一切正常吗？以及我该如何解决？

Answer 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,
);

Axios POST可以工作，但axios.create POST会生成400错误的请求错误

1 个答案: