未捕获（承诺）SyntaxError：JSON 输入意外结束

Question

我正在尝试向我的服务器发送新的推送订阅，但遇到错误“Uncaught (in promise) SyntaxError: Unexpected end of JSON input”，控制台显示它在我的索引页面第 1 行，但显然不是这种情况.

我怀疑发生问题的函数（因为当我注释掉它时没有抛出错误）是 sendSubscriptionToBackEnd(subscription) 在下面调用：

 function updateSubscriptionOnServer(subscription) {
  const subscriptionJson = document.querySelector('.js-subscription-json');
  const subscriptionDetails = document.querySelector('.js-subscription-details');

  if (subscription) {
    subscriptionJson.textContent = JSON.stringify(subscription);
    sendSubscriptionToBackEnd(subscription);
    subscriptionDetails.classList.remove('is-invisible');
  } else {
    subscriptionDetails.classList.add('is-invisible');
  }
}

函数本身（在上述函数之前）：

  function sendSubscriptionToBackEnd(subscription) {
  return fetch('/path/to/app/savesub.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(subscription)
  })
  .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.');
    }
  });
}

我曾尝试在 fetch 调用中用双引号替换单引号，但结果相同。

我知道应该填充 JSON，因为它使用 updateSubscriptionOnServer() 函数打印到屏幕上 subscriptionJson.textContent = JSON.stringify(subscription); ，我在 google codelab 的示例服务器中使用了该输出以成功接收推送。

编辑：这是作为字符串的 JSON，但我没有看到语法错误：

 {"endpoint":"https://fcm.googleapis.com/fcm/send/dLmthm1wZuc:APA91bGULRezL7SzZKywF2wiS50hXNaLqjJxJ869y8wiWLA3Y_1pHqTI458VIhJZkyOsRMO2xBS77erpmKUp-Tg0sMkYHkuUJCI8wEid1jMESeO2ExjNhNC9OS1DQT2j05BaRgckFbCN","keys":{"p256dh":"BBz2c7S5uiKR-SE2fYJrjPaxuAiFiLogxsJbl8S1A_fQrOEH4_LQjp8qocIxOFEicpcf4PHZksAtA8zKJG9pMzs=","auth":"VOHh5P-1ZTupRXTMs4VhlQ=="}}

有任何想法吗？？

原文由 zoltar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这可能是端点未在响应标头中传递适当参数的问题。

在 Chrome 的控制台中，在“网络”选项卡内，检查端点发送的标头，它应该包含以下内容： Example of proper response to allow requests from localhost and cross domains requests

要求 API 开发人员将其包含在标头中：

 "Access-Control-Allow-Origin" : "*",
"Access-Control-Allow-Credentials" : true

原文由 Max Cabrera 发布，翻译遵循 CC BY-SA 3.0 许可协议