Come inviare dati JSON per REST Webservice in AngularJS

Question

Come inviare dati JSON per web-service tramite AngularJS Ecco il frammento di codice

.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); 
     }); 
    } 
}) 

OPZIONI http: /// messenger/API/messaggi/savePost
ionic.bundle.js: 16185 (funzione anonima) ionic.bundle.js: 16185 ionic.bundle.js sendReq: 15979 ionic.bundle.js serverRequest: 15712 ionic.bundle.js wrappedCallback: 19197 wrappedCallback ionic.bundle.js: 19197 (funzione anonima) ionic.bundle.js: 19283 Ambito. $ Eval ionic.bundle.js: 20326 Scope. $ Digest ionic.bundle.js: 20138 Scope. $ Apply ionic.bundle.js: 20430 (funzione anonima) ionic.bundle.js: 43025 (funzione anonima) 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 non può caricare http: /// messenger/api/posts/savePost. HTTP valido codice di stato 404

Ma quando rimuovo il MSGDATA da $ http.post metodo, tutto funziona bene. qualcuno può dirmi dove la questione è altrimenti mi guida come inviare dati JSON al web-service

Grazie per l'aiuto

**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.** 

Answer 1

Okay,

È mescolato paio di cose:

Innanzitutto come posso vedere la tua richiesta è cambiata da POST a OPZIONI.

Perché?

Si stanno eseguendo richieste HTTP tra siti (CORS), il che significa che WebApp e l'API di back-end non si trovano nello stesso dominio.

Quello che succede dal vivo è che la richiesta viene sottoposta a preflight.

richiesta preflight: da Mozilla MDN:

Esso utilizza metodi diversi da GET, HEAD o POST. Inoltre, se si utilizza il POST per inviare i dati di richiesta con un Content-Type diverso da application/x-www-form-urlencoded, multipart/form-data o text/plain, ad es. se la richiesta POST invia un payload XML al server utilizzando application/xml o text/xml, la richiesta viene sottoposta a preflight.

Il che significa che, qualsiasi richiesta di fianco GET, HEAD o POST sarà cambiamento a OPZIONI E: Post ha anche se utilizzato per inviare i dati con Content-Type diversi application/x-www-form-urlencoded, multipart/form-data, or text/plain

ora capire, ma cosa fare? Devo fare la richiesta POST!

Non si dispone di molte opzioni, poiché CORS è definito sul server.

Ma sul client che si possa fare in modo (esempio): cambiare il tipo di codifica in angolare in questo modo: $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

O

impostare il server per l'approvazione CORS in questo modo:

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. 

Buona fortuna!