如何JSON数据发布到web服务REST在AngularJS

如何通过AngularJS 在这里发表JSON数据网络服务是代码片段如何JSON数据发布到web服务REST在AngularJS

.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：///信使/ API /职位/ 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事件处理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数据发送到网络服务

感谢您的帮助

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

来源

2014-11-08 Sathish Ravepati

您的webservice是否期望JSON或表单数据？（例如：“message = test＆x = test2”） – 2014-11-08 15:50:18

webservice只期望JSON格式 – 2014-11-08 15:54:44

好吧，

你混了几件事情：

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

为什么？

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

现场会发生什么，请求正在预冲。

预检请求：由Mozilla MDN：

它使用比GET，HEAD或POST的其它方法。另外，如果POST使用来发送具有除 application/x-www-form-urlencoded，multipart/form-data或text/plain之外的内容类型的请求数据，例如。如果POST请求使用 application/xml或text/xml向服务器发送XML有效内容，则会预先显示该请求。

这意味着，旁边GET，HEAD或POST将改变OPTIONS 任何请求：如果用来发送其他与Content-Type的数据比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.

祝你好运！

来源

2014-11-08 16:10:53 Linial

感谢Linial，我没有意识到这是CORS问题。在控制器中添加标题解决了我的问题。 – 2014-11-08 17:44:40

我知道它已经被接受，但我只是想补充一点，设置一个php服务器来获得访问控制，你只需要在你的进程页面顶部添加这行： <？php header（“Access-Control- Allow-Origin：*“）; header（“Access-Control-Allow-Headers：Origin，X-Requested-With，Content-Type，Accept”）; – 2015-02-04 14:03:17

如何JSON数据发布到web服务REST在AngularJS

回答

相关问题