JJ9999 JJ9999 - 1 year ago 126
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 Source

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.