Основная ошибка при доступе к данным JSON (функциональность JS) - PullRequest
Новая
       14

Основная ошибка при доступе к данным JSON (функциональность JS)

0 голосов
/ 16 февраля 2019

Справочная информация:

Я пытаюсь использовать простой пример push-уведомлений в Интернете, приведенный в документации Google (ссылка: https://developers.google.com/web/fundamentals/push-notifications/subscribing-a-user)

Я продолжаю сталкиваться сSyntaxError: JSON.parse: unexpected character at line 2 column 1 of the JSON data ошибка, которая означает, что я делаю что-то в корне неправильно. Я новичок JS, вы можете помочь?

Моя простая функция подписать пользователя на push - это просто: 

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.

1 Ответ

0 голосов
/ 17 февраля 2019

Основная проблема заключалась в том, что 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.Тайна раскрыта!

...