JJ9999 JJ9999 - 1 month ago 4
Ajax Question

JSON AJAX Post 403 forbidden error

Hi I just started learning Spring, AJAX, JSON. I have been getting an error when i try to post a message back.

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;
}


I have tried many different things to solve this problem but nothing is working, I can't post the message.

Any help or reason why I keep getting this error?


jquery.js:4 POST http://localhost:8080/spring/sendmessage 403
(Forbidden) send @ jquery.js:4 ajax @ jquery.js:4 sendMessage @
messagesView:32 (anonymous function) @ messagesView:90


Screenshot

Answer

I had the same problem, you need to add the CSRF headers into the AJAX POST request. Take a look at Cross Site Request Forgery. I'm not at my development system at the moment so can't post an example, but using the info from this page worked for me.

Comments