SyntaxError: "JSON.parse: unexpected character at line 1 column 1 of the JSON data" with Fetch api

Question

我正在尝试使用 Fetch api 将一些 HTML 表单输入与 Javascript 传递到服务器端（Flask）。当我发送一个 POST 请求时，它工作得很好，我也可以接收数据，但它也在 Mozilla Firefox 上给我这个错误声明：

SyntaxError: "JSON.parse: unexpected character at line 1 column 1 of the JSON data"

然后 Google Chrome 它给了我：

SyntaxError: Unexpected token < in JSON at position 0

这是我的 Fetch api 代码：

$(document).ready(function() {
    const myForm = document.getElementById("vform");
    myForm.addEventListener('submit', function(e){

    let phonenumber = document.getElementById('phoneNumber').value;
    let password = document.getElementById('password').value;
    let checked = document.getElementById('rememberMe').value;

    if(typeof phonenumber, password, checked !== 'undefined' && phonenumber, password, checked !== null) {

    var data = [{
                    phoneNo: phonenumber,
                    password: password,
                    checked: checked,
                }];

    fetch(`${window.origin}/login`, {
        method:'POST',
        headers: {
            "Content-Type": "application/json" 

        },

        body: JSON.stringify(data)
    })
    .then((res) => res.json())

    .then((data) => console.log(data))

    .catch((err)=>console.log(err))

    e.preventDefault();
    }
 });
});

这就是我在服务器端接收数据的方式：

@app.route("/login", methods=["GET", "POST"])
def login():
  if request.get_json() != None:     
    req = request.json()
    phoneNo = req["phoneNo"]
    password = req["password"]
    checked =  req["checked"]


    print(phoneNo)
    return render_template("index.html", req=req)

为什么会这样？你能帮帮我吗？

Answer 1

对于故障排除 api 我更喜欢你使用 postman.In 你的情况你的渲染函数传递了一个 html 文件，它不在 json format.In flask 中我们使用对象序列化库将非 json 数据转换为 json.Marshmallow 是一个 ORM/ODM/framework-agnostic 库，用于将复杂数据类型（例如对象）与本机 Python datatypes.But 在你的情况下它不会 help.However 你的问题检查这个博客 post 希望它会有所帮助。 blog post

SyntaxError: "JSON.parse: unexpected character at line 1 column 1 of the JSON data" with Fetch api

SyntaxError: "JSON.parse: unexpected character at line 1 column 1 of the JSON data" with Fetch api

javascript

forms

json

flask

fetch-api