angularjs - 如何在 AngularJS 中将 JSON 数据发布到 REST Web 服务

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

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

但是当我从 $http.post 方法中删除 msgdata 时，一切正常。
谁能告诉我问题出在哪里，或者指导我如何将 JSON 数据发送到网络服务

谢谢您的帮助

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

Why?

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

实时发生的是请求正在被预检。

预检请求:来自 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.

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

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

您没有太多选择，因为 CORS 是在服务器上定义的。

但在客户端你可以这样做(例如):
像这样以 Angular 更改编码类型: $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.

祝你好运!