Question

我试图用Axios向使用Python瓶编码的后端发出帖子请求。

问题在于我在触发请求时获得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});
  });

瓶子代码：

@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控制台中记录的错误简单明了：

选项xxx / api / v3.6 / save_day_titles 500（内部服务器错误）

XMLHttpRequest无法加载xxx / api / v3.6 / save_day_titles。对预检请求的响应没有通过访问控制检查：否＆＃39;访问控制 - 允许 - 来源＆＃39;标头出现在请求的资源上。起源＆＃39; http://localhost:3000＆＃39;因此不允许访问。响应的HTTP状态代码为500。

它看起来像一个CORS，但我做了很多其他请求（获取请求）并且没有CORS错误......无论如何，当我尝试在服务器中记录主体时：{{1日志是：

127.0.0.1 - - [17 / Aug / 2017 18:18:45]“POST /api/v3.6/save_day_titles HTTP / 1.0”500 765
B”＆＃39;

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

print request.body.parse()

Axios Config似乎没问题：

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".

所以，我只是被困在这里，无法解决问题，任何想法？暗示？

提前致谢。

Answer 1

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

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

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

奇怪的是，使用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".

那是在测试POST请求。您的浏览器永远无法执行POST;相反，它首先执行CORS preflight OPTIONS request，但是当它收到对500请求的OPTIONS错误响应时，这是预检失败，因此浏览器永远不会继续执行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请求标头，而这是触发浏览器执行预检的条件之一。

Bottle无法识别Axios.js json帖子

1 个答案: