How to send JSON data to REST Webservice in AngularJS

How to send JSON data to a web service through AngularJS here is a 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: (anonymous function) ionic.bundle.js: 19283 Volume: $ eval ionic.bundle.js: 20326 Volume. $ 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: /// messengers / API / messages / savePost. Invalid HTTP status code 404

But when I remove msgdata from the $ http.post method, everything works fine. Can someone tell me where the problem is, or how can I send JSON data to a 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.** 
+6
source share
1 answer

Good,

You messed up a couple of things:

At first, when I see, your request changed from POST to OPTIONS.

Why?

You are making 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 preceded.

Prefilled query: by Mozilla MDN:

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

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

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

You do not have many parameters, since CORS is defined on the server.

But on the client, you can do this (example): change the encoding type in angular as follows: $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

OR

Install the server to approve CORS as follows:

 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

+7
source

Source: https://habr.com/ru/post/977921/


All Articles