Заблокирован перекрестный запрос: пользовательский интерфейс Braintree dropin - PullRequest
Новая
       15

Заблокирован перекрестный запрос: пользовательский интерфейс Braintree dropin

0 голосов
/ 28 августа 2018

Я использую braintree.dropin, чтобы создать интерфейс для формы кредитной карты.

payment_method.html (я замаскировал значение авторизации с помощью ???) 

<head>
  <meta charset="utf-8">
  <script src="https://js.braintreegateway.com/web/dropin/1.12.0/js/dropin.min.js"></script>
</head>
<body>
  <div id="dropin-container"></div>
  <button id="submit-button">Request payment method</button>
  <script>

    // https://stackoverflow.com/a/133997/72437
    function post(path, params, method) {
      method = method || "post"; // Set method to post by default if not specified.

      // The rest of this code assumes you are not using a library.
      // It can be made less wordy if you use one.
      var form = document.createElement("form");
      form.setAttribute("method", method);
      form.setAttribute("action", path);

      for (var key in params) {
          if (params.hasOwnProperty(key)) {
              var hiddenField = document.createElement("input");
              hiddenField.setAttribute("type", "hidden");
              hiddenField.setAttribute("name", key);
              hiddenField.setAttribute("value", params[key]);

              form.appendChild(hiddenField);
          }
      }

      document.body.appendChild(form);
      form.submit();
    }

    var button = document.querySelector('#submit-button');

    braintree.dropin.create({
      authorization: '???',
      container: '#dropin-container'
    }, function (createErr, instance) {
      button.addEventListener('click', function () {
        instance.requestPaymentMethod(function (err, payload) {
          post('/billing/subscribe/', 
            {
              'csrfmiddlewaretoken': 'lDqtKKosE9yBGtKmFv4BSBvDCGEX1WPsY0JOy0XlZC5Vnc6zR5BQmuCzkhzeS1PJ',
              'subscription_plan': 2,
              'payload_nonce': payload.nonce
            }
          );
        });
      });
    });
  </script>
</body>

Однако, после отправки информации о кредитной карте, я получаю это предупреждение.

Запрос на перекрестное происхождение заблокирован: одна и та же политика происхождения запрещает чтение удаленный ресурс на https://origin -analytics-sand.sandbox.braintree-api.com / cn2rcqfn435vtj63 . (Причина: запрос CORS не выполнен).

enter image description here

Хотя весь процесс работает нормально (мне удается совершить платеж без проблем), боюсь, возможно, мне следует исправить предупреждение, чтобы избежать каких-либо пробелов в системе безопасности. Это вызвано вызванной функцией post.

Однако я понятия не имею, в чем причина такого предупреждения и как я должен это исправить.

Так как домен моей страницы localhost, и я выполняю POST обратно в домен localhost. Я думал, что это не междоменная проблема? Откуда тогда появляется предупреждение https://origin-analytics-sand.sandbox.braintree-api.com/cn2rcqfn435vtj63?

Есть идеи?

Что я проверял

Если я выполняю функцию post, вызванную вне области функции обратного вызова instance.requestPaymentMethod, предупреждение о происхождении не будет. Конечно, я не могу этого сделать, потому что мне нужна payload.nonce из функции обратного вызова instance.requestPaymentMethod.

...