无法使用 axios 向 Flask 应用程序发送 POST 请求
Posted
技术标签:
【中文标题】无法使用 axios 向 Flask 应用程序发送 POST 请求【英文标题】：Can not send POST request to Flask app using axios 【发布时间】：2019-12-18 18:28:10 【问题描述】：我只是想使用 axios 向 Flask 发送一个 json post 请求。但是我在服务器控制台中得到“选项”，我知道这是预检请求。我发现如果我在 axios 的标头中使用 x-www-form-urlencoded 而不是 application/json，浏览器不会执行预检请求，所以我最终收到了 POST 请求。但是 POST 请求块（如您在下面的代码中所见）仍然没有受到打击。即使我在服务器中设置了访问控制允许来源，我仍然遇到 CORS 问题。这可能是什么问题？
//FLASK SERVER
@bp.route("/", methods=["GET", "POST"])
def recipes():
if request.method == "GET":
# show all the recipes
recipes = [
'name': 'BURGER', 'ingredients': ['this', 'that', 'blah'],
'name': 'CHICKEN'
]
return jsonify(recipes)
elif request.method == "POST":
# save a recipe
print('SEE HEREEE'+ str(request.data))
print(request.is_json)
content = request.get_json()
print(content)
return jsonify(content), 201, 'Access-Control-Allow-Origin': '*', 'Access-Control-Request-Method': "*", 'Access-Control-Allow-Headers': "*"
//FRONTEND
try
let response = await axios(
method: "POST",
url: "http://localhost:5000/recipes/",
headers:
"Content-Type": "*"
,
data: "hello": "HI"
);
console.log("RESPONSE HERE", response)
catch(err)
throw new Error("ERROR", err)
//浏览器控制台
【问题讨论】：
Firefox 'Cross-Origin Request Blocked' despite headers的可能重复 @ShanteshwarInde 不，不是！我的问题与 HTTPS 或凭据无关！！ 你查过leo的答案了吗？ @ShanteshwarInde 重新启动浏览器？？我正在使用 chrome，是的，我已经这样做了！ 【参考方案1】：如果 Python 代码中有任何错误，它会在前端显示类似的错误。从您的屏幕截图中，我看到LoginForm 中有错误。我认为这就是前端没有按预期工作的原因。
为了处理 CORS 错误，我使用 flask_cors Flask 扩展。套餐详情可查看in this Pypi package repository。
我已经简化了代码来测试当后端没有错误时是否出现CORS 错误。我可以使用来自 Axios 的 POST 请求添加新配方。
后端：
from flask import Flask, render_template, jsonify, request
from flask_cors import CORS
app = Flask(__name__)
CORS(app)
@app.route("/recipes", methods = ['GET', 'POST'])
def recipes():
# recipes
recipes = [
'name': 'BURGER', 'ingredients': ['this', 'that', 'blah'],
'name': 'HOTDOG', 'ingredients': ['Chicken', 'Bread']
]
if request.method == "GET":
return jsonify(recipes)
elif request.method == "POST":
content = request.get_json()
recipes.append(content)
return jsonify(recipes)
前端：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Frontend Application</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="result">
</div>
<script type="text/javascript">
axios.post('http://127.0.0.1:5000/recipes',
name: 'Sandwich',
ingredients: ['Vegetables', 'Sliced cheese', 'Meat']
)
.then(function (response)
var result = document.getElementById("result");
const data = response.data;
for(var i=0; i<data.length; i++)
const item = data[i];
result.innerHTML+=item.name+": "+item.ingredients+"<br>";
)
.catch(function (error)
console.log(error);
);
</script>
</body>
</html>
输出：
【讨论】：
谢谢！实际上，我已经像您一样使用 flask-cors 包解决了它，并在 5 小时前自己回答了我的问题，但是有人删除了它：/我不知道为什么，可能是因为我提供了帖子的链接一个解决了我的问题的网站。无论如何，有没有办法在不使用外部包的情况下解决这个问题？我猜在前端的 axios 函数中添加一些参数应该可以做到这一点？但我不确定是什么。 很高兴听到您解决了这个问题。无法从前端处理 CORS。这是与此声明相关的文章：medium.com/@jeanpan/…以上是关于无法使用 axios 向 Flask 应用程序发送 POST 请求的主要内容，如果未能解决你的问题，请参考以下文章
Axios 数据在发送到 Flask POST 路由时以 ImmutableMultiDict([]) 的形式出现，但与 Postman 一起使用
使用 Vue Axios (CORS) 发送/存储会话 cookie 时出现问题
使用 Flask 和 React 的 localhost CORS 错误