如何在 paypal SDK API 上启用 CORS？

Question

我正在使用 paypal SDK 来启用支付，一切正常我什至测试了代码超过 100 次，但今天我在控制台中收到以下错误：

自从我的代码工作以来，我没有更改任何内容：

<script>
let total = '{{ order.get_cart_total }}'
// Render the PayPal button into #paypal-button-container
paypal.Buttons({

    style: {
        color: 'blue',
        shape: 'pill',
        label: 'pay',
        height: 50
    },
    // Set up the transaction
    createOrder: function (data, actions) {
        return actions.order.create({
            // ISTO É CÓDIGO ADICIONADO MAIS TARDE
            intent: 'CAPTURE',
            payer: {
                name: {
                    given_name: `{{ user.first_name }}`,
                    surname: `{{ user.last_name }}`
                }
            },
            address: {
                address_line_1: '{{ userAddress.street_address }}',
                address_line_2: '{{ userAddress.apartment_address }}',
                admin_area_2: '{{ userAddress.city }}',
                admin_area_1: '{{ userAddress.state }}',
                postal_code: '{{ userAddress.zip }}',
                country_code: '{{ userAddress.country }}',
            },
            purchase_units: [{
                amount: {
                    value: parseFloat(total).toFixed(2)
                }
            }]
        });
    },
    // Finalize the transaction
    onApprove: function (data, actions) {
        return actions.order.capture().then(function (orderData) {
            let transaction = orderData.purchase_units[0].payments.captures[0];
            submitFormData(transaction)
        });
    },
    onCancel: function (data) {
        alert('Something went wrong with the payment.')
    },
    onError: function (err) {
        alert(`${err}`)
    }
}).render('#paypal-button-container');

function submitFormData(transaction) {
    console.log('Entrou Aqui')

    var url = "/process-order/"
    fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'applicaiton/json',
                'X-CSRFToken': csrftoken,
            },
            body: JSON.stringify({
                'total': total,
                'transaction': transaction
            }),

        })
        .then((response) => response.json())
        .then((data) => {
            console.log('Entrou Aqui tbm')

            // HERE I CHEANGE THE CHECKOUT NAVBAR ACTIVE LINK AND REDIRECT THE USER TO THE "RECEIPT" WRAPPER
            let marker = document.getElementById('marker')
            let navLinks = document.querySelectorAll('.userNavLink')
            let checkoutWrappers = document.getElementsByClassName('checkout-wrapper')

            marker.style.left = navLinks[2].offsetLeft + 'px'

            checkoutWrappers[1].style.display = 'none'
            navLinks[1].classList.remove('active-link')

            checkoutWrappers[2].style.display = 'flex'
            navLinks[2].classList.add('active-link')
            document.title = navLinks[2].innerText

            // HERE I UPDATE THE CART ICON
            let cartItems = document.getElementById('cartItems')
            cartItems.innerText = 0

            // HERE I DIPLAY SOME DETAILS FROM THE CURRENT TRANSACTION
            let transactionDetails = document.getElementById('transaction-details')
            transactionDetails.innerText = `The transaction with the ID:${transaction.id} was ${transaction.status}
                                    at ${transaction.create_time}`

            // HERE I CHANGE THE RECEIPT CONTAINER ATRIBUTE TO "completed" AND DISABLE THE LINKS
            checkoutWrappers[2].dataset.status = 'completed'
            navLinks[2].style.pointerEvents = 'all'
            navLinks[0].style.pointerEvents = 'none'
            navLinks[1].style.pointerEvents = 'none'
        })
}

根据我为启用 CORS 所做的研究，我们必须在服务器端发出请求，但 paypal SDK 允许客户端和服务器端集成。

Paypal SDK 客户端： https://developer.paypal.com/demo/checkout/#/pattern/client

在我的贝宝沙盒帐户中，付款已完成，但我从未像往常那样收到交易详细信息。 如果有人能帮我解决这个问题，我已经被困了好几个小时了。

Answer 1

在您的屏幕截图中，CORS 请求失败不是问题。您可以忽略这些消息。

问题出在最后一行，Unexpected token < in JSON at position 1。

这意味着您正在获取一个 URL 并尝试将结果解析为 JSON，但它不是 JSON。它是 HTML —— 以< 开头的东西。当您获取的 URL 返回错误页面或某些其他内容而不是您期望的数据时，可能会发生这种情况。

因此，您只需在您的服务器上调试该 URL/路由，并确保它输出正确的、预期的 JSON 数据，而不是 HTML 或您的 JavaScript 代码无法理解或执行任何操作的错误文本。