未捕获(在promise中)SyntaxError:JSON输入的意外结束

Question

我正在尝试向我的服务器发送新的推送订阅,但遇到错误"未捕获(在承诺中)SyntaxError:JSON输入的意外结束"并且控制台说它在我的索引页面的第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=="}}

有任何想法吗？？

Answer 1

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

在Chrome控制台的"网络"选项卡中,检查端点发送的标头,它应包含以下内容: 允许来自localhost和跨域请求的请求的正确响应示例

请API开发人员将其包含在标题中:

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

Answer 2

当我使用 Express.js 运行服务器并使用 Brave 浏览器时，这种情况也发生在我身上。就我而言，这是 COR 的问题。我执行了以下操作，解决了我的问题：（因为这是一个 Express 框架，所以我使用 app.get）

- 在服务器端：

 res.set({
        "Content-Type": "application/json",
        "Access-Control-Allow-Origin": "*",
    });

-在客户端，我使用 Fetch 来获取数据，但禁用了 CORS 选项

// mode: "no-cors" //disabled this in Fetch

这解决了我使用 Express 获取数据的问题