Javascript 来自React前端的POST到API不工作--错误400

我试图将数据发送到我的Flask API以将数据获取到我的数据库中，但我一直收到以下错误：OPTIONS/createUser HTTP/1.1 400

注册js

---

我尝试过更改JSON以防格式不正确，但没有任何改变。我还尝试过从postman发帖，效果很好，所以我认为这是javascript。

如果您使用的是Chrome，请尝试添加CORS扩展，您应该在后端启用CORS，如springboot@CrossOriginorigins=http://localhost:3000

从请求中检索数据时，尝试在块中使用此选项。400错误通常表示服务器无法从POST请求主体获取值

req = request.json
first = req['FirstName']
last = req['LastName']

@main.route('/createUser', methods=['POST', 'OPTIONS'])
def createUser():
    # handle option request
    if request.method == "OPTIONS":
        response = make_response()
        response.headers["Access-Control-Allow-Origin"] = "*"
        response.headers[
            "Access-Control-Allow-Headers"
        ] = "Origin, Accept, Content-Type"
        response.headers["Access-Control-Allow-Methods"] = "POST,OPTIONS"
        response.headers["Access-Control-Allow-Credentials"] = "true"
        return response

    if request.method == "POST":
        # do your SQL stuff
        conn = connection()
        cur = conn.cursor()

        req = request.get_json()
        first = req.get("FirstName")
        last = req.get("LastName")
        email = req.get("Email")
        pw = req.get("Password")

        sql = (
            "INSERT INTO User (first, last, emailAddress, password) VALUES (?, ?, ?, ?)"
        )
        data = (first, last, email, pw)
        cur.execute(sql, data)

        conn.commit()
        cur.close()

        # make response
        response = make_response("{}")  # return empty JSON response
        response.headers["Access-Control-Allow-Origin"] = "*"
        response.headers[
            "Content-Type"
        ] = "application/json"  # set response type to JSON
        return response

    return "", 405  # method not allowed

从错误消息error:OPTIONS/createUser HTTP/1.1 400中，无法正确处理选项请求。我猜，邮递员在默认情况下并没有做选项请求，所以这个案例适合你。此外，路由没有返回任何json，因此返回res.json//如果是纯文本，此处的错误将失败

我用普通的烧瓶方法修改了你的例子。注意：我还从Javascript中删除了“Access Control Allow Origin”：“*”请求头

@main.route('/createUser', methods=['POST', 'OPTIONS'])
def createUser():
    # handle option request
    if request.method == "OPTIONS":
        response = make_response()
        response.headers["Access-Control-Allow-Origin"] = "*"
        response.headers[
            "Access-Control-Allow-Headers"
        ] = "Origin, Accept, Content-Type"
        response.headers["Access-Control-Allow-Methods"] = "POST,OPTIONS"
        response.headers["Access-Control-Allow-Credentials"] = "true"
        return response

    if request.method == "POST":
        # do your SQL stuff
        conn = connection()
        cur = conn.cursor()

        req = request.get_json()
        first = req.get("FirstName")
        last = req.get("LastName")
        email = req.get("Email")
        pw = req.get("Password")

        sql = (
            "INSERT INTO User (first, last, emailAddress, password) VALUES (?, ?, ?, ?)"
        )
        data = (first, last, email, pw)
        cur.execute(sql, data)

        conn.commit()
        cur.close()

        # make response
        response = make_response("{}")  # return empty JSON response
        response.headers["Access-Control-Allow-Origin"] = "*"
        response.headers[
            "Content-Type"
        ] = "application/json"  # set response type to JSON
        return response

    return "", 405  # method not allowed

---

请不要将密码以明文形式保存在数据库中：-

您还可以通过在输入表单标记（如Name=Email）中使用名称字段并设计一个通用更改处理程序（如：

onChange(event) {  
    this.setState({ event.target.name: event.target.value })  
  }   

---

尝试在react js中使用Axios进行Http请求。您可以参考此选项，您的状态值是否不应在事件发生时更改？你可以控制台。记录它们并在这里发布一个片段吗？@Jawadulhassan我应该在哪里记录它们？在render和return下面记录它们。我想知道flask路由的返回类型是什么-你返回的是simply Done，201-这意味着很可能是纯文本，创建了201。在javascript中，您尝试解析JSON，但没有返回JSON。您的用户是否已创建？我收到以下错误：TypeError:“NoneType”对象不是subscriptableI我已为flask导入CORS并添加CORS扩展，但它没有更改任何内容。我更改了它，但什么也没有发生。是不是因为我的react代码发送了一个选项请求，即使我指定它是一个POST，尽管我读到这是因为CORS的飞行前请求，我不完全理解？浏览器总是在常规GET、POST、PUT之前发送一个选项请求。。请求检查资源是否允许。浏览器中的错误消息是什么？flask输出[13/Feb/2020 23:39:46]OPTIONS/createUser HTTP/1.1 200，但我记录状态，结果为空，没有任何内容插入数据库选项请求对我来说很好-post方法内部发生了什么？是否有来自浏览器的日志？post请求未命中服务器？你看到选项请求了吗？你的邮递员要求说什么？

onChange(event) {  
    this.setState({ event.target.name: event.target.value })  
  }