无法使用 axios 向 Flask 应用程序发送 POST 请求答案

【问题标题】：Can not send POST request to Flask app using axios无法使用 axios 向 Flask 应用程序发送 POST 请求
【发布时间】：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，是的，我已经这样做了！

标签： flask cors axios

【解决方案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/…