ASP.NET Core 5 Razor Pages集成Stripe时Fetch API路径如何设置

解决方案 #

第一步：页面添加防伪令牌 #

Razor Pages 默认启用 AntiForgeryToken 校验，所有 POST 请求必须携带有效令牌才能访问后台方法。你需要在 Index.cshtml 的任意位置加入防伪令牌生成代码：

@Html.AntiForgeryToken()

第二步：修改前端 fetch 请求配置 #

两个核心调整点：

1. 根目录下的 Index 页面/?handler=Create路径本身合法，若你的页面放在子目录下，要补全对应路径前缀
2. 在请求头中加入防伪令牌，否则会返回400错误

修改后的 initialize 方法代码如下：

// Fetches a payment intent and captures the client secret
async function initialize() {
    // 获取页面生成的防伪令牌
    const antiForgeryToken = document.querySelector('input[name="__RequestVerificationToken"]').value;
    const response = await fetch('/?handler=Create', {
        method: "POST",
        headers: { 
            "Content-Type": "application/json",
            "RequestVerificationToken": antiForgeryToken
        },
        body: JSON.stringify({ items }),
    });
    // 新增错误排查逻辑，方便定位问题
    if (!response.ok) {
        const error = await response.text();
        console.error('请求失败：', error);
        return;
    }
    const { clientSecret } = await response.json();

    const appearance = {
        theme: 'stripe',
    };
    elements = stripe.elements({ appearance, clientSecret });

    const paymentElement = elements.create("payment");
    paymentElement.mount("#payment-element");
}

如果要避免硬编码路径出错，可以在 Razor 页面中生成路径注入到JS：

<script>
const createPaymentIntentUrl = '@Url.Page("Index", "Create")';
</script>

后续 fetch 直接使用createPaymentIntentUrl变量即可。

第三步：调整后台方法参数绑定 #

前端传的是 JSON 格式请求体，需要给后台参数加[FromBody]特性，否则模型绑定会失败，request 会为空：

public IActionResult OnPostCreate([FromBody] PaymentIntentCreateRequest request)
{
    var paymentIntentService = new PaymentIntentService();
    var paymentIntent = paymentIntentService.Create(new PaymentIntentCreateOptions
    {
        Amount = CalculateOrderAmount(request.Items),
        Currency = "AUD",
        PaymentMethodTypes = new List<string>
        {
            "card",
        },
    });

    return new JsonResult(new { clientSecret = paymentIntent.ClientSecret });
}

内容的提问来源于stack exchange，提问作者Malawby