Announcement Announcement Module
Collapse
No announcement yet.
Unable to send JSON data over CORS POST request Page Title Module
Move Remove Collapse
X
Conversation Detail Module
Collapse
  • Filter
  • Time
  • Show
Clear All
new posts

  • Unable to send JSON data over CORS POST request

    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:
    Code:
    POST http://localhost:8068/web-app/app/api/post-json-obj
    Content-Type: application/json
    {"description": "hello", "title": "JohnDoe", "identifier":"testResponse"}
    Code:
    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:
    Code:
    @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);
      }


    Request:
    Code:
    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:
    Code:
    HTTP/1.1 200 OK
    Server: Apache-Coyote/1.1
    Allow: GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS
    Content-Length: 0
    Date: Tue, 13 Nov 2012 21:32:44 GMT
    Last edited by ttback; Nov 13th, 2012, 05:09 PM.

  • #2
    Man you never got a response. I am hoping that in the meantime you got it to work.

    I am in the same boat now, and still the Filters and other posts out there don't seem to get this to work.

    Did you get it working? If so, how?

    Thanks

    Mark

    Comment

    Working...
    X