如何在 Laravel 8 中使用 JavaScript 获取？

Posted 2023-03-14

【中文标题】如何在 Laravel 8 中使用 JavaScript 获取？

【英文标题】：How do I use JavaScript fetch in Laravel 8?

【发布时间】：2021-03-08 21:44:27

【问题描述】：

问题： 因此，每当我单击激活 javascript 代码的 html 按钮时，我都会在控制台中收到一条错误消息： POST http://127.0.0.1:8000/payment419（未知状态）

我的尝试

我尝试了不同的方法来让变量工作，用视图返回它，JSON_ENCODE()，我一直在尝试研究如何在 Laravel 中使用 fetch，但我觉得我错过了一些明显的东西。

这是我的 HTML 和 Javascript 代码：

<form action="/payment" method="POST">
@csrf
<button class="btn btn-primary py-3 px-4" id="checkout-button">Proceed to Checkout</button>
<script type="text/javascript">
    // Create an instance of the Stripe object with your publishable API key
    var stripe = Stripe('pk_test_*******************');
    var checkoutButton = document.getElementById('checkout-button');

    checkoutButton.addEventListener('click', function() 
    // Create a new Checkout Session using the server-side endpoint you
    // created in step 3.
        fetch('/payment', 
            method: 'POST', 
            headers: 
               'Content-Type': 'application/json',
               'Accept': 'application/json',
               'url': '/payment',
            ,
         )
         .then(function(response) 
             return response.json();
         )
         .then(function(session) 
             return stripe.redirectToCheckout( sessionId: session.id );
         )
         .then(function(result) 
             // If `redirectToCheckout` fails due to a browser or network
             // error, you should display the localized error message to your
             // customer using `error.message`.
             if (result.error) 
                 alert(result.error.message);
             
          )
          .catch(function(error) 
              //console.error('Error:', error);
          );
      );
</script>
</form>

这是我的路线：

Route::post('/payment', [StripePaymentController::class, 'payment']);

这是我的控制器方法：

    /* Sends the stripe key, and payment info to the stripe api, as long as the payment session */
    public function payment() 
        // Sets up the businesses secret key to receive the payment
        \Stripe\Stripe::setApiKey(env('STRIPE_SECRET'));

        // Sets up payment method, and product information
        $session = \Stripe\Checkout\Session::create ([
            'payment_method_types' => ['card'],
            'line_items' => [[
              'price_data' => [
                'currency' => 'usd',
                'product_data' => [
                  'name' => 'T-shirt',
                ],
                'unit_amount' => 2000,
              ],
              'quantity' => 1,
            ]],
            'mode' => 'payment',
            'success_url' => 'http://127.0.0.1:8000/',
            'cancel_url' => 'http://127.0.0.1:8000/cart',
        ]);

        return response()->json(['id' => $session->id]);
    

【参考方案1】：

这是一个关于 CSRF 令牌不匹配的错误

您需要在获取请求中手动传递令牌

fetch('/payment', 
    method: 'POST', 
    headers: 
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'url': '/payment',
        "X-CSRF-Token": document.querySelector('input[name=_token]').value
    ,
)

【讨论】：

哦....它有效...我花了 2 天的时间...您是如何获得这些信息的？所以我可以参考一下。

@RodrigoAlvarez Laravel 文档：laravel.com/docs/8.x/csrf#csrf-introduction。如果它为后续访问者的利益解决了您的问题，请记住接受/支持答案

确实如此。如果您在 devtools 中查看由 @csrf 填充的隐藏输入，您可以看到名称和值

以前的版本没什么问题。我将其更改为 vanilla javascript，使其与库/框架无关。不依赖像 jquery 这样的库

我会推荐 beginnerjavascript.com 课程 - 这是一个付费但值得的课程。 javascript30.com 是来自同一作者的另一个免费的，但它有点处于中高级水平