403错误-模态窗口中的CSRF令牌

Question

我正在从事Spring Boot + Bootstrap项目。 我创建了一个模态窗口来确认iten的删除，但是在将Spring Security添加到项目中之后，模态停止了工作。

如何在模式窗口中正确配置CSRF令牌？ 我尝试了一些方法，但没有成功。

删除itens时出现以下错误：

发生意外错误（类型为禁止，状态为403）。 在请求参数'_csrf'或标头'X-CSRF-TOKEN'上发现无效的CSRF令牌'null'。

谢谢您的帮助！

ConfirmRemove.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<div class="modal fade" id="confirmRemove" tabindex="-1"
    data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog">
        <form th:attr="data-url-base=@{/restaurants}" method="POST">
            <input type="hidden" name="_method" value="DELETE" />
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">Você tem certeza?</h4>
                </div>

                <div class="modal-body">
                    <span>Are you sure you want to delete this restaurant?</span>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-link" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Delete</button>
                </div>
            </div>
        </form>
    </div>
</div>

</html>

restaurantpoll.js

$('#confirmRemove').on(
        'show.bs.modal',
        function(event) {

            var button = $(event.relatedTarget);

            var codeRestaurant = button.data('id');
            var nameRestaurant = button.data('name');

            var modal = $(this);
            var form = modal.find('form');
            var action = form.data('url-base');

            if (!action.endsWith('/')) {
                action += '/';
            }

            form.attr('action', action + codeRestaurant);

            modal.find('.modal-body span').html(
                    'Are you sure you want to delete <strong>'
                            + nameRestaurant + '</strong>?')

        });

RestaurantController（仅相关部分）

package com.matmr.restaurantpoll.controller;

import java.util.Arrays;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.validation.Errors;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;

import com.matmr.restaurantpoll.exception.RestaurantNotFoundException;
import com.matmr.restaurantpoll.model.Category;
import com.matmr.restaurantpoll.model.Restaurant;
import com.matmr.restaurantpoll.model.filter.RestaurantFilter;
import com.matmr.restaurantpoll.service.RestaurantService;

@Controller
@RequestMapping("/restaurants")
public class RestaurantController {

    @Autowired
    private RestaurantService restaurantService;

    @Autowired
    public RestaurantController(RestaurantService restaurantService) {

        this.restaurantService = restaurantService;

    }

    @RequestMapping(value = "{id}", method = RequestMethod.DELETE)
    public String delete(@PathVariable Long id, RedirectAttributes attributes) throws RestaurantNotFoundException {
        restaurantService.deleteById(id);

        attributes.addFlashAttribute("message", "The restaurant was successfully deleted.");
        return "redirect:/restaurants";
    }


}

restaurantList.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://ultraq.net.nz/thymeleaf/layout"
    layout:decorator="Layout">
<head>
<title>Pesquisa de Restaurantes</title>
</head>

<section layout:fragment="conteudo">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <div class="clearfix">
                <h1 class="panel-title liberty-title-panel">Pesquisa de
                    Restaurantes</h1>
                <a class="btn btn-link liberty-link-panel"
                    th:href="@{/restaurants/new}">Cadastrar Novo Restaurante</a>
            </div>
        </div>

        <div class="panel-body">

            <form method="GET" class="form-horizontal"
                th:action="@{/restaurants}" th:object="${filter}">

                <div layout:include="MensagemGeral"></div>
                <div layout:include="MensagemErro"></div>

                <div class="form-group">
                    <div class="col-sm-4">
                        <div class="input-group">
                            <input class="form-control"
                                placeholder="Qual restaurante você está procurando?"
                                autofocus="autofocus" th:field="*{name}"></input> <span
                                class="input-group-btn">
                                <button type="submit" class="btn btn-default">
                                    <i class="glyphicon glyphicon-search"></i>
                                </button>
                            </span>

                        </div>
                    </div>
                </div>
            </form>

            <div class="table-responsive">
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th class="text-left col-md-1">#</th>
                            <th class="text-left col-md-2">Nome</th>
                            <th class="text-left col-md-3">Descrição</th>
                            <th class="text-left col-md-2">Categoria</th>
                            <th class="col-md-1"></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr th:each="restaurant : ${restaurants}">
                            <td class="text-left" th:text="${restaurant.id}"></td>
                            <td class="text-left" th:text="${restaurant.name}"></td>
                            <td class="text-left" th:text="${restaurant.description}"></td>
                            <td class="text-left"
                                th:text="${restaurant.category.description}"></td>
                            <td class="text-center"><a class="btn btn-link btn-xs"
                                th:href="@{/restaurants/{id}(id=${restaurant.id})}"
                                title="Editar" rel="tooltip" data-placement="top"> <span
                                    class="glyphicon glyphicon-pencil"></span>
                            </a> <a class="btn btn-link btn-xs" data-toggle="modal"
                                data-target="#confirmRemove"
                                th:attr="data-id=${restaurant.id}, data-name=${restaurant.name}"
                                title="Excluir" rel="tooltip" data-placement="top"> <span
                                    class="glyphicon glyphicon-remove"></span>
                            </a></td>
                        </tr>
                        <tr>
                            <td colspan="5" th:if="${#lists.isEmpty(restaurants)}">Nenhum
                                restaurante foi encontrado!</td>
                        </tr>
                    </tbody>

                </table>

            </div>
        </div>

        <div layout:include="confirmRemove"></div>

    </div>
</section>
</html>

Answer 1

在模式的表单标签中添加th：action =“ @ {/ restaurants}”可以达到以下目的：

<form th:action="@{/restaurants}" th:attr="data-url-base=@{/restaurants}" method="POST">