使用ThymeLeaf发送POST请求出现XML XMLHttpRequest.state=403的错误

最新推荐文章于 2023-11-04 21:36:01 发布

wust_to_nwpu_zmc

最新推荐文章于 2023-11-04 21:36:01 发布

阅读量1k

点赞数

分类专栏： ThymeLeaf

本文链接：https://blog.csdn.net/qq_35502337/article/details/103125327

版权

当使用ThymeLeaf发送POST请求时遇到XMLHttpRequest.state=403错误，这通常是因为跨域请求问题。可能的原因是CSRF（跨站请求伪造）防护机制。为解决此问题，需要在HTML头文件中添加CSRF相关配置，并在JS中获取并附带CSRF token到POST请求中。

摘要由CSDN通过智能技术生成

403表示出现跨域请求问题

此时考虑csrf导致的问题

代码编写

head中添加csrf

<head>
    <meta charset="UTF-8">
    <title>shop-register</title>
    <!-- CSRF -->
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <!-- default header name is X-CSRF-TOKEN -->
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
</head>

js这样写

获取csrf token，发送post请求前先添加crsf token

$("#shopBtn").on("click",function () {
    // 获取 CSRF Token
    var csrfToken = $("meta[name='_csrf']").attr("content");
    var csrfHeader = $("meta[name='_csrf_header']").attr("content");
    var formData = $("#shopForm").serialize();
    $.ajax({
        url: 'http://localho