CODEWITHSUNDEEP
angularjsionic-framework
Satish Ravipati
Satish Ravipati

Reputation: 1449

How to post JSON data to REST Webservice in AngularJS

How to post JSON data to web-service via AngularJS here is the code snippet

.controller('MessagePostCtrl', function($scope, $http) {
    $scope.postMessage = function() {
        var msg = document.getElementById('message').value;
        var msgdata = {
                message : msg
            };
        var res = $http.post('http://<domain-name>/messenger/api/posts/savePost',msgdata);
        res.success(function(data, status, headers, config) {
            console.log(data);
        });
    }
})

OPTIONS http:///messenger/api/posts/savePost
ionic.bundle.js:16185(anonymous function) ionic.bundle.js:16185 sendReq ionic.bundle.js:15979 serverRequest ionic.bundle.js:15712 wrappedCallback ionic.bundle.js:19197 wrappedCallback ionic.bundle.js:19197(anonymous function) ionic.bundle.js:19283 Scope.$eval ionic.bundle.js:20326 Scope.$digest ionic.bundle.js:20138 Scope.$apply ionic.bundle.js:20430(anonymous function) ionic.bundle.js:43025(anonymous function) ionic.bundle.js:10478 forEach ionic.bundle.js:7950 eventHandler ionic.bundle.js:10477 triggerMouseEvent ionic.bundle.js:2648 tapClick ionic.bundle.js:2637 tapMouseUp ionic.bundle.js:2707

XMLHttpRequest cannot load http:///messenger/api/posts/savePost. Invalid HTTP status code 404

But when I remove the msgdata from $http.post method, everything is working fine. Can anyone tell me where the issue is or else guide me how to send JSON data to web-service

Thanks for the help

**Edited:
The Issue was with the CORS, Im using codeigniter REST Controller for web-services.
Modified the headers. If anyone has the same issue add the below header in the construct

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method");
if ( "OPTIONS" === $_SERVER['REQUEST_METHOD'] ) {
die();
}
Thanks to Linial for the break-through, telling me where the issue is.**

Upvotes: 6

Views: 27061

Answers (1)

Linial
Linial

Reputation: 1154

Okay,

You mixed up couple of things:

First as I can see your request has changed from POST to OPTIONS.

Why?

You are performing Cross-site HTTP requests ( CORS ), which means that your WebApp and your backend API are not in the same domain.

What happens live is that the request is being preflighted.

Preflighted request: by Mozilla MDN:

It uses methods other than GET, HEAD or POST. Also, if POST is used to send request data with a Content-Type other than application/x-www-form-urlencoded, multipart/form-data, or text/plain, e.g. if the POST request sends an XML payload to the server using application/xml or text/xml, then the request is preflighted.

Which means, any request beside GET, HEAD or POST will be change to OPTIONS AND: Also POST if used to send data with Content-Type other than application/x-www-form-urlencoded, multipart/form-data, or text/plain

I now understand, but what to do? I have to make POST request!

You don't have many options, since CORS is defined on the server.

But on the client you could do so (Example): change the encode type in angular like so: $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

OR

Set your server to approve CORS like so:

Access-Control-Allow-Headers: Content-Type \\ This will allow you to set content type header in the client.

Access-Control-Allow-Methods: GET, POST, OPTIONS \\ This will allow you to send GET POST and OPTIONS, which is necessary because of preflighted requests.

Access-Control-Allow-Origin: * \\ This will allow anyone to perform CORS requests.

Good Luck!

Upvotes: 7

Related Questions