Question

背景：

我正在尝试Google文档（链接：https://developers.google.com/web/fundamentals/push-notifications/subscribing-a-user）中给出的简单的Web推送通知示例

我一直遇到SyntaxError: JSON.parse: unexpected character at line 2 column 1 of the JSON data错误，这意味着我做的事情根本上是错误的。我是JS新手，可以帮忙吗？

我订阅用户推送的简单功能很简单：

function subscribeUserToPush() {

  const pub_key = document.getElementById("notif_pub_key");
  const service_worker_location = document.getElementById("sw_loc");
  return navigator.serviceWorker.register(service_worker_location.value)
  .then(function(registration) {
    const subscribeOptions = {
      userVisibleOnly: true,
      applicationServerKey: urlBase64ToUint8Array(pub_key.value)
    };
    return registration.pushManager.subscribe(subscribeOptions);
  })
  .then(function(pushSubscription) {
    sendSubscriptionToBackEnd(pushSubscription);
    return pushSubscription;
  });
}

sendSubscriptionToBackEnd（）本质上使用fetch，如下所示：

function sendSubscriptionToBackEnd(subscription) {
  const sub_obj =  {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'CSRFToken':get_cookie('csrftoken')
    },
    body: JSON.stringify(subscription)
  }
  return fetch('/subscription/save/', sub_obj)
  .then(function(response) {
    if (!response.ok) {
      throw new Error('Bad status code from server.');
    }

    return response.json();
  })
  .then(function(responseData) {
    if (!(responseData.data && responseData.data.success)) {
      throw new Error('Bad response from server.');
    }
  });
}

此操作失败，并显示错误SyntaxError: JSON.parse: unexpected character at line 2 column 1 of the JSON data。

执行console.log(sub_obj)显示此对象：

Object { method: "POST", headers: {…}, body: "{\"endpoint\":\"https://updates.push.services.mozilla.com/wpush/v2/gAAAAABcaErG3Zn6Urzn5Hfhpyjl0eJg_IVtcgZI-sQr5KGE0WEWt9mKjYb7YXU60wgJtj9gYusApIJnObN0Vvm7oJFRXhbehxtSFxqHLOhSt9MvbIg0tQancpNAcSZ3fWA89E-W6hu0x4dqzqnxqP9KeQ42MYZnelO_IK7Ao1cWlJ41w8wZSlc\",\"keys\":{\"auth\":\"AJfXcUMO3ciEZL1DdD2AbA\",\"p256dh\":\"BN84oKD3-vFqlJnLU4IY7qgmPeSG96un-DttKZnSJhrFMWwLrH2j1a0tTB_QLoq5oLCAQql6hLDJ1W4hgnFQQUs\"}}" }

也在console.log(response);显示之前执行return response.json();：

Response { type: "basic", url: "http://127.0.0.1:8001/subscription/save/", redirected: false, status: 200, ok: true, statusText: "OK", headers: Headers, body: ReadableStream, bodyUsed: false }

有什么问题，我该如何解决？

将return response.json()更改为return response.text()，然后在responseData上进行控制台登录，将得到页面的整个HTML。我最终遇到错误Error: Bad response from server.

Answer 1

主要问题是在CSRFToken中设置sendSubscriptionToBackEnd时标签错误。应该是X-CSRFToken。即

function sendSubscriptionToBackEnd(subscription) {
  const sub_obj =  {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRFToken':get_cookie('csrftoken'),
    },
    body: JSON.stringify(subscription)
  }
  return fetch('/subscription/save/', sub_obj)
  .then(function(response) {
    console.log(response);
    if (!response.ok) {
      throw new Error('Bad status code from server.');
    }
    return response.json();
  })
  .then(function(responseData) {
    // response from the server
    console.log(responseData)
    if (!(responseData.data && responseData.data.success)) {
      throw new Error('Bad response from server.');
    }
  });
}

那为什么导致return response.json();失败呢？

因为所讨论的项目会将未通过csrf检查的请求路由到默认视图-一个根本不返回json响应的视图。谜团解决了！

访问JSON数据时的基本错误（JS功能）

1 个答案: