2

我正在使用 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 上的按钮触发的。现在，当它被触发时，数据不会发布到请求箱，我收到这个错误：

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

如何通过 AngularJS 控制器发布数据以请求 bin？另外，上面的错误是什么意思？

编辑：我想在这里补充一下，我正在使用带有 AngularJS 的 Node.js。这可能与Node有关吗？

4

3 回答 3

3

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

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

你有两个选择：

  1. 查看您的 API 是否支持任何跨域功能。这可能是通过 CORS，也可能是通过重载的 GET API 或 JSONP。

  2. 通过您的服务器代理请求。由于您使用的是 Node.js，因此通过您的服务器代理 REST 非常简单……您只需要在您的 Node.js 服务器中设置一个路由处理程序（如 /api/redacted），然后向您的实际服务器发出一个新请求带有 Restler（NPM 包）之类的 API 服务器，并将结果返回给您的客户端。

希望这可以帮助！

编辑：

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

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

于 2013-04-15T11:57:05.773 回答
1

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 不会让我跨域发布。不过我对此持怀疑态度，因为我在其他项目中有 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',
})
于 2013-05-15T21:25:03.190 回答
0

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

于 2015-08-29T21:29:21.770 回答