Abp ajax The required antiforgery request token was not provided in either form field

使用abp框架,使用了Zero模块。再使用Element ui进行上传图片。出现400 bad request错误请求。

用postman传数据到接口时正常工作的。

经过几经波折,终于找到问题是nati token的问题。 https://forum.aspnetboilerplate.com/viewtopic.php?f=5&t=10025&sid=5b3ace20a25195168c29846975df630d

因为element ui 不是abp的部分。他使用的ajax请求没有包含antiForgery token。所以被abp框架视为是跨站攻击的请求,所以返回了400错误。同理,用jquery的ajax方法去请求数据也是会出现这错误的。

用postman能够正确请求,因为postman没有使用apb view页面,没有设置antiForgery token。所以可以上传文件。

解决办法是在请求头加X-XSRF-TOKEN。

那么问题变成了,如何获取antiForgery token。

答案是,使用abp封装的方法: abp.security.antiForgery.getToken()。 https://aspnetboilerplate.com/Pages/Documents/XSRF-CSRF-Protection

我贴一下示例

<script src="~/js/jquery.min.js"></script>
<script src="~/libs/abp-web-resources/Abp/Framework/scripts/abp.js"></script>
<script src="~/libs/abp-web-resources/Abp/Framework/scripts/libs/abp.jquery.js"></script>

<script>
    //模拟数据
    var newPerson = {
        name: 'Dougles Adams',
        age: 42
    };
    // headers设置!
    var headers = { 'x-xsrf-token': abp.security.antiForgery.getToken() };
    
    //abp ajax
    abp.ajax({
        url: '/api/services/app/TestService/Test',
        data: JSON.stringify(newPerson),
        headers: headers,
        dataType: "json"
    }).done(function (data) { alert(data) });


    //jquery ajax
    $.ajax({
        type: 'POST',
        url: '/api/services/app/TestService/Test',
        headers: headers,
        data: JSON.stringify(newPerson),
        success: function (data) {
            console.log(data);
        }
    });

</script>

转载于:https://www.cnblogs.com/saving/p/8056964.html

原文地址:https://www.cnblogs.com/hanjun0612/p/13709599.html