This is quite an old question but after trying everything I learned, I still can't get it to function properly after hours of trying to send JSON data over CORS POST request. GET and POST with parameters worked perfectly but POST data seems to be elusive.
You won't see it in the code here, but CORS filter-mapping is set up for all servlets. I don't think it's the reason why I can't hit the controller methods from ajax request.
Environment:
- jquery: 1.8.2
- chrome: Version 23.0.1271.64 m
- Spring MVC 3.0.5.RELEASE
I attempted it with httprequest software, so I know if I can send following request to the server, it would work properly. But I just can't send a request over with Content-type other than the default, so I never actually send the real request after pre-flight
Required Request to get proper response from server:
POST http://localhost:8068/web-app/app/api/post-json-obj
Content-Type: application/json
{"description": "hello", "title": "JohnDoe", "identifier":"testResponse"}
Code:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="application/javascript">
//Required Request Info:
//POST http://localhost:8068/web-app/app/api/post-json-obj
//Content-Type: application/json
//{"description": "hello", "title": "JohnDoe", "identifier":"testResponse"}
(function($) {
var url = 'http://localhost:8068/web-app/app/api/post-json-obj';
var data = {"description": "hello", "title": "JohnDoe", "identifier":"testResponse"};
$.ajax({
type: 'POST',
url: url,
data: JSON.stringify(data),
contentType:"application/json",
success: function(response) {
alert("success");
},
error: function(xhr) {
alert('Error! Status = ' + xhr.status + " Message = " + xhr.statusText);
}
});
})(jQuery);
</script>
</head>
<body>
</body>
</html>
Server-side:
@RequestMapping(value="/post-json-obj", method = RequestMethod.POST, consumes = {"application/json"})
public @ResponseBody ResponseEntity<WebResponse> postJSONObject(@RequestBody Item item) {
WebResponse res = new WebResponse();
res.setMessage("success");
return new ResponseEntity<WebResponse>(res, HttpStatus.ACCEPTED);
}
Pre-flight:
Request
OPTIONS /web-app/app/api/post-json-obj HTTP/1.1
Host: localhost:8068
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:16.0) Gecko/20100101 Firefox/16.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
DNT: 1
Connection: keep-alive
Origin: http://localhost
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type
Pragma: no-cache
Cache-Control: no-cache
Response
HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type
Access-Control-Max-Age: 1800
Allow: GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS
Content-Length: 0
Date: Wed, 14 Nov 2012 20:27:37 GMT
Real request
Request:
POST http://localhost:8068/web-app/app/api/post-json-obj HTTP/1.1
Request Payload: {"name":"hello","message":"JohnDoe"}
Response:
No response
