Day16 - Ajax 加上 Antiforgery Token (一)

这篇内容延续上一篇的部份，来加上 Antiforgery Token 的给定及验证 !

Case01

在 Action AddOrderItem() 的部份，加上 ValidateAntiForgeryToken Attribute

[HttpPost, Route("api/[controller]/[action]")]
[ValidateAntiForgeryToken]                        // 新增
public IActionResult AddOrderItem([FromForm]int index)
{
    ViewData["OrderItemIndex"] = index;

    return PartialView("/Views/Day16/OrderItem.cshtml", new OrderItem() );
}

此时，在 ajax 未给定 Antiforgery Token 的情况下，发送 request 会发生 http status code 400 的错误

View 的 ajax request header 加上给定 Antiforgery Token 的语法

• form tag helper 预设会自动产生 input name 为 __RequestVerificationToken 的 dom，这个 dom 存放的值，就是 Antiforgery Token
• request header 加上 key 为 RequestVerificationToken ， value 为上述 Antiforgery Token 的值

// 新增
window.AntiForgeryToken = document.querySelectorAll('input[name="__RequestVerificationToken"]')[0].value;

window.AddItem = function () {

    const requestBody = new URLSearchParams();
    requestBody.append('index', ItemsCount);

    fetch(AddItemUrl, {
        method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'RequestVerificationToken': AntiForgeryToken,           @* 新增 *@
            },
            body: requestBody,
        })
    .then(response => response.text())
    .then(data => {
        $('#Items').append(data);
        ItemsCount++;
    })
}

此时，发送 request 到後端，就会正常了 !

这篇先到这里，下一篇来看看进入轻前端 Vue 前的范例 !