如何在AngularJS中将JSON数据发布到REST Webservice

Question

如何通过AngularJS将JSON数据发布到Web服务这里是代码片段

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

选项http:/// messenger/api/posts/savePost
ionic.bundle.js:16185(匿名函数)ionic.bundle.js:16185 sendReq ionic.bundle.js:15979 serverRequest ionic.bundle.js:15712 wrappedCallback ionic. bundle.js:19197 wrappedCallback ionic.bundle.js:19197(匿名函数)ionic.bundle.js:19283范围.$ eval ionic.bundle.js:20326范围.$ digest ionic.bundle.js:20138范围.$ apply ionic.bundle.js:20430(匿名函数)ionic.bundle.js:43025(匿名函数)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无法加载http:/// messenger/api/posts/savePost.无效的HTTP状态代码404

但是当我从$ http.post方法中删除msgdata时,一切正常.任何人都可以告诉我问题在哪里,或者指导我如何将JSON数据发送到Web服务

谢谢您的帮助

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

好的,

你搞砸了几件事情:

首先,我可以看到您的请求已从POST更改为OPTIONS.

为什么？

您正在执行跨站点HTTP请求(CORS),这意味着您的WebApp和后端API不在同一个域中.

现场发生的事情是请求正在预检.

预先请求:由Mozilla MDN提供:

它使用GET,HEAD或POST以外的方法.此外,如果POST用于发送具有除application/x-www-form-urlencoded,multipart/form-data或text/plain之外的Content-Type的请求数据,例如,如果POST请求将XML有效负载发送到服务器使用application/xml或text/xml,请求预检.

这意味着,GET,HEAD或POST旁边的任何请求都将更改为OPTIONS AND:如果用于发送除Content-Type以外的数据,则还要POST application/x-www-form-urlencoded, multipart/form-data, or text/plain

我现在明白了,但该怎么办？我要发出POST请求!

您没有很多选项,因为在服务器上定义了CORS.

但是在客户端上你可以这样做(例子):改变角度的编码类型,如下所示: $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

要么

将服务器设置为批准CORS,如下所示:

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.

祝好运!