JSON AJAX Post 403 禁止错误

Question

您好，我刚开始学习 Spring、AJAX、JSON。当我尝试发回消息时，我收到了错误消息。

messages.jsp

function success(data) {
    $("#form" + data.target).toggle();
    $("#alert" + data.target).text("Message sent.")
    startTimer();

}

function error(data) {
    alert("Error sending message");
} 

function sendMessage(i, name, email){
    var text = $("#textbox" + i).val();

    $.ajax({
        type: "POST", 
        url: '<c:url value="/sendmessage" />',
        data: JSON.stringify({"target": i, "text": text, "name": name, "email": email}),
        success: success,
        error: error,
        contentType: "application/json",
        dataType: "json"
    });

}

function showMessages(data){

    $("div#messages").html("");

    for(var i=0; i<data.messages.length; i++) {
        var message = data.messages[i];

        var messageDiv = document.createElement("div");
        messageDiv.setAttribute("class", "message");

        var subjectSpan = document.createElement("span");
        subjectSpan.setAttribute("class", "subject");
        subjectSpan.appendChild(document.createTextNode(message.subject));

        var contentSpan = document.createElement("span");
        contentSpan.setAttribute("class", "contentText");
        contentSpan.appendChild(document.createTextNode(message.content));

        var nameSpan = document.createElement("span");
        nameSpan.setAttribute("class", "nameSpan");
        nameSpan.appendChild(document.createTextNode("From: "+ message.name + '('));

        var link = document.createElement("a");
        link.setAttribute("class", "replylink");
        link.setAttribute("href", "#");
        link.setAttribute("onClick", "showReply(" + i + ")");
        link.appendChild(document.createTextNode(message.email));
        nameSpan.appendChild(link);
        nameSpan.appendChild(document.createTextNode(")"));

        var alertSpan = document.createElement("span");
        alertSpan.setAttribute("class", "alert");
        alertSpan.setAttribute("id", "alert" + i);          

        var replyForm = document.createElement("form");
        replyForm.setAttribute("class", "replyForm");
        replyForm.setAttribute("id", "form" + i);

        var textarea = document.createElement("textarea");
        textarea.setAttribute("class", "replyArea");
        textarea.setAttribute("id", "textbox" + i);


        var replyButton = document.createElement("input");
        replyButton.setAttribute("class", "replyButton");
        replyButton.setAttribute("type", "button");
        replyButton.setAttribute("value", "reply");
        replyButton.onclick = function(j, name, email) {
            return function() {
                sendMessage(j, name, email);
            }
        }(i, message.name, message.email);

        replyForm.appendChild(textarea);
        replyForm.appendChild(replyButton);

        messageDiv.appendChild(subjectSpan);
        messageDiv.appendChild(contentSpan);
        messageDiv.appendChild(nameSpan);
        messageDiv.appendChild(alertSpan);
        messageDiv.appendChild(replyForm);


        $("div#messages").append(messageDiv);
    }
}

controller.java

@RequestMapping(value="/sendmessage", method=RequestMethod.POST, produces="application/json")
@ResponseBody
public Map<String, Object> sendMessages(Principal principal, @RequestBody Map<String, Object> data){

    String text = (String)data.get("text");
    String name = (String)data.get("name");
    String email = (String)data.get("email");
    Integer target = (Integer)data.get("target");

    System.out.println(name + " , " + email + " , " + text);

    Map<String, Object> returnVal = new HashMap<String, Object>();      
    returnVal.put("success", true);
    returnVal.put("target", target);

    return returnVal;
}

我尝试了很多不同的方法来解决这个问题，但没有任何效果，我无法发布消息。

我不断收到此错误的任何帮助或原因？

jquery.js:4 POST http://localhost:8080/spring/sendmessage 403 (禁止) send@jquery.js:4 ajax@jquery.js:4 sendMessage@ messagesView:32（匿名函数）@messageView:90

Screenshot

Answer 1

我遇到了同样的问题，您需要将 CSRF 标头添加到 AJAX POST 请求中。看看Cross Site Request Forgery。我目前不在我的开发系统中，因此无法发布示例，但使用此页面中的信息对我有用。

Answer 2

第 1 步： 在表单中添加一个 id --->

<form id='formid' ....>    

第 2 步： 将表单作为序列化表单传递 --->

$.ajax({
        type: "POST", 
        url: '<c:url value="/sendmessage" />',
        data: ('#formid').serialize(),
        success: success,
        error: error,
        contentType: "application/json",
        dataType: "json"
 });