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

Question

如何通过 AngularJS 将 JSON 数据发布到网络服务 这是代码sn-p

.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 包裹回调 ionic.bundle.js:19197 包裹回调 ionic.bundle.js:19197（匿名函数） ionic.bundle.js:19283 Scope.$eval ionic.bundle.js:20326 Scope.$digest ionic.bundle.js:20138 Scope.$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 点击点击 ionic.bundle.js:2637 tapMouseUp ionic.bundle.js:2707

XMLHttpRequest 无法加载 http:///messenger/api/posts/savePost。无效的 HTTP 状态码 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。

为什么？

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

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

预检请求：Mozilla MDN：

它使用 GET、HEAD 或 POST 以外的方法。此外，如果使用 POST 发送 Content-Type 以外的请求数据 application/x-www-form-urlencoded、multipart/form-data 或 text/plain， 例如如果 POST 请求使用 application/xml 或 text/xml，然后预检请求。

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

我现在明白了，但该怎么办？我必须发出 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.

祝你好运！