Question

我正在使用Request Bin发布一些数据。在我的控制器中，我有以下代码：

$http.post('http://requestb.in/redacted', fooBar).
    success(function(data) {
        $scope.fooBarPostedSuccess = true;
    }).
    error(function(err) {
        console.log("Error while posting to Request Bin");
        console.log("Error Info : " + err);
    });

这是通过UI上的按钮触发的。现在当它被触发时，数据不会发布到Request Bin，我收到此错误：

XMLHttpRequest cannot load http://requestb.in/redacted.
Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin.

如何通过AngularJS控制器将数据发布到请求bin？另外，上述错误意味着什么？

编辑：我希望在此添加我使用Node.js和AngularJS。这可能与Node有关吗？

Answer 1

啊是的...您正在处理跨域脚本问题。这不是AngularJS问题，而是浏览器安全限制和非常常见的摩擦点。

如果不执行某些跨源资源共享（CORS），则无法POST / PUT / DELETE到另一个域（与托管的那个域不同 - 在您的情况下为localhost）。您只能使用GET进行跨域HTTP请求。

您有两种选择：

查看您的API是否支持任何跨域功能。这可能是通过CORS，也可能是通过重载的GET API或JSONP。
通过您的服务器发出代理请求。由于您使用的是Node.js，因此通过服务器代理REST非常简单......您只需在Node.js服务器中设置路由处理程序（如/ api / redacted），然后向您的实际发出新的请求API服务器与Restler（NPM包）之类的东西，并将结果返回给您的客户端。

希望这有帮助！

修改

您的API支持JSONP（Your API Docs）。您应该能够使用Angular的JSONP函数来访问API的JSONP功能。（Angular.js JSONP docs）。

由于您希望能够POST到服务，因此您需要使用第二种方法。

Answer 2

CORS允许GET和POST

http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

http://www.w3.org/TR/cors/

https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS

现在，那已经不在了...... 我也发现angular的$ http不会让我POST跨域。我对此持怀疑态度，因为我在其他项目中有jquery ajax调用可以发布跨域很好。所以，我用$ .ajax POST交换了我的$ http POST，这很有效。

// $http({
//  url: url,
//  method: "POST",
//  data: data
// })
// .success(successCallback)
// .error(errorCallback)

// ole reliable
$.ajax({
  type : "POST",
  url : url,
  data : data,
  success : successCallback,
  error : errorCallback,
  cache : false,
  dataType : 'json',
})

Answer 3

您可以使用PutsReq代替RequestBin。 PutsReq支持CORS。

AngularJS：$ http.post抛出错误

3 个答案: