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

How to post JSON data to web-service via AngularJS here is the code snippet

如何通过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

OPTIONS HTTP:///信使/ API /职位/ savePost ionic.bundle.js:16185(匿名函数)ionic.bundle.js:16185个sendReq ionic.bundle.js:15979个serverRequest ionic.bundle.js:15712 wrappedCallback离子。 bundle.js:19197个wrappedCallback ionic.bundle.js:19197(匿名函数)ionic.bundle.js:19283范围$ EVAL ionic.bundle.js:。20326范围$消化ionic.bundle.js:20138范围$申请ionic.bundle.js:20430(匿名函数)ionic.bundle.js:43025(匿名函数)ionic.bundle.js:10478的forEach ionic.bundle.js:7950事件处理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

XMLHttpRequest无法加载http:/// messenger / api / posts / savePost。无效的HTTP状态代码404

But when I remove the msgdata from $http.post method, everything is working fine. Can anyone tell me where the issue is or else guide me how to send JSON data to web-service

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

Thanks for the help

谢谢您的帮助

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

1 个解决方案

#1

Okay,

You mixed up couple of things:

你混淆了几件事:

First as I can see your request has changed from POST to OPTIONS.

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

Why?

You are performing Cross-site HTTP requests ( CORS ), which means that your WebApp and your backend API are not in the same domain.

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

What happens live is that the request is being preflighted.

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

Preflighted request: by Mozilla MDN:

预检请求:由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以外的方法。此外,如果POST用于发送具有除application / x-www-form-urlencoded,multipart / form-data或text / plain之外的Content-Type的请求数据,例如,如果POST请求使用application / xml或text / xml将XML有效负载发送到服务器,则该请求将被预检。

Which means, any request beside GET, HEAD or POST will be change to OPTIONS AND: Also POST if used to send data with Content-Type other than application/x-www-form-urlencoded, multipart/form-data, or text/plain

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

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

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

You don't have many options, since CORS is defined on the server.

您没有很多选项,因为CORS是在服务器上定义的。

But on the client you could do so (Example): change the encode type in angular like so: $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

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

Set your server to approve CORS like so:

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

Good Luck!

#1