语法错误：意外的标记'<' when fetching JSON response from Django API

Question

我正在尝试使用 Stripe JavaScript 库创建 Stripe 结账会话。当我单击结帐按钮时，我将向服务器端 API 发送 POST 请求以创建结帐会话。但是，当我尝试将响应解析为 JSON 时，我得到了

SyntaxError

。

这是我的 JavaScript 代码：

  var stripe = Stripe("your_stripe_publishable_key");
  var checkoutButton = document.getElementById("checkout-button");

  try {
    checkoutButton.addEventListener("click", function() {
      var email = "{{order.email}}";

      checkoutButton.innerHTML = "Processing...";
      fetch("api/create_checkout_session/{{order.oid}}", {
        method: "POST",
        body: JSON.stringify({email:email})
      })
     .then(function(response){
        return response.json()
      })
     .then(function(session){
        return stripe.redirectToCheckout({sessionId: session.sessionId})
      })
     .then(function(result){
        if(result.error){
            alert(result.error.message)
        }
      })
     .catch(function(error){
        console.log("Error:",error);
      })
    });
  } catch (error) {
    console.log(error);
  }

这是我收到的错误：

Error: SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

我已经检查了我的服务器端代码，它应该返回带有结帐会话 ID 的 JSON 响应。但是，响应似乎以 HTML 而不是 JSON 的形式返回。

任何人都可以帮我弄清楚发生了什么事以及如何解决这个问题吗？

其他背景：

我使用 Django 作为我的后端框架。 我已经验证服务器端代码是否被正确调用并且应该返回 JSON 响应。 我检查了浏览器的开发人员工具，响应确实以 HTML 而不是 JSON 的形式返回。 预先感谢您的帮助！

Answer 1

当您尝试在此处解析非 JSON 字符串时，会触发语法错误：

return response.json()

错误表明，JSON 输入以

<!DOCTYPE 

开头，这意味着您获得的是 HTML 文档而不是 JSON。仔细观察，您在端点中犯了一个拼写错误，并且忘记了开头的斜杠。 JS 中的字符串插值的工作方式也与 Python 不同。所以改为

"api/create_checkout_session/{{order.oid}}"

您的端点应该如下所示

`/api/create_checkout_session/${order.oid}`