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：///信使/ API /职位/ 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请求使用XML向服务器发送XML有效负载 application / xml或text / xml，然后请求被预检。

这意味着，GET，HEAD或POST旁边的任何请求都将更改为OPTIONS AND：如果用于发送内容类型不是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";

OR

将您的服务器设置为批准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.

祝你好运！

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

1 个答案: