javascript - Bottle 不识别 Axios.js json post

Question

我正在尝试使用 Axios 向用 Python bottle 编码的后端发出发布请求。

问题是当请求被触发时，我得到一个 500 internal。

首先，这里是axios请求代码:

const data = {date: formatDate(date), titles}
post(`${API_URL}/save_day_titles`, data)
  .then(res => {
    console.log('response success', {...res});
  })
  .catch(res => {
    console.log('response', {...res});
  });

Bottle 代码:

@planApi.route('/api/v3.6/save_day_titles', method=['POST', 'OPTIONS'])
def plan_save():
    date = request.json['date']
    titles = request.json['titles']
    plan = {
        'date': datetime.datetime.strptime(date, '%Y-%m-%d'),
        'titles': titles 
    }
    id = titlesMongo.insert_one(plan).inserted_id
    return {"id": str(id), "plan_date": date, "planification": titles}

Web 控制台中记录的错误简单明了:

OPTIONS xxx/api/v3.6/save_day_titles 500 (Internal Server Error)

XMLHttpRequest cannot load xxx/api/v3.6/save_day_titles. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 500.

它看起来像一个 CORS，但我正在发出很多其他请求(获取请求)并且没有 CORS 错误......无论如何，当我尝试在服务器中记录主体时，如:print request .body.parse() 日志是:

127.0.0.1 - - [17/Aug/2017 18:18:45] “POST /api/v3.6/save_day_titles HTTP/1.0” 500 765
b’'

奇怪的是，使用 CURL 请求是成功的:

curl -H "Content-Type: application/json" -X POST -d '{ "date": "2017-08-15", "titles": [{"title": "title test", "url":"xxx/xxx", "category": "category test"}] }' "xxx/api/v3.6/save_day_titles".

Axios 配置似乎没问题:

date: "{"date":"2017-08-01","titles":[{"title":"title test","url":"xxx/xxx","category":"category test"}]}"
headers:
  Accept: "application/json, text/plain, */*"
  Content-Type: "application/json;charset=utf-8"

所以，我只是被困在这里，无法找出问题所在，有什么想法吗？提示？

提前致谢。

Answer 1

您的浏览器正在执行 CORS preflight OPTIONS request ，但是当您的服务器收到该请求时发生了一些内部故障，因此服务器会对该请求返回 500 错误响应。

当服务器发生内部故障并发送 500 错误响应时，服务器不会添加 Access-Control-Allow-Origin 响应 header ，因此您最终会看到 CORS 错误消息。

所以真正的问题不是 CORS 错误，而是服务器中的一些内部问题——正因为如此，要找到解决方案，您需要查看服务器端的服务器日志，看看消息是什么当 500 错误发生时，服务器正在记录原因。

The weird thing is, with CURL the request is succesful:

curl -H "Content-Type: application/json" -X POST \-d '{ "date": "2017-08-15", "titles": [{"title": "title test", "url":"xxx/xxx", "category": "category test"}] }' "xxx/api/v3.6/save_day_titles".

这是在测试一个 POST 请求。您的浏览器永远不会执行 POST；相反，它首先执行 CORS preflight OPTIONS request ，但是当它收到对 OPTIONS 请求的 500 错误响应时，这是预检失败，因此浏览器永远不会继续执行 POST .

因此，要使用 curl 模拟浏览器行为，您首先需要发送一个 OPTIONS 请求:

curl -X OPTIONS -i -H 'Origin: http://localhost:3000' \
    -H 'Access-Control-Request-Method: POST' \
    -H 'Access-Control-Request-Headers: Content-Type' \
    xxx/api/v3.6/save_day_titles

这应该会让服务器返回您在浏览器中看到的相同的 500 错误响应。

请注意浏览器这样做的原因 CORS preflight OPTIONS request是因为您的前端 JavaScript 代码正在添加 Content-Type: application/json 请求 header ，这是触发浏览器进行预检的条件之一。