AngularJS：$http.post 抛出错误

Question

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

$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？另外，上面的错误是什么意思？

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

Answer 1

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

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 不会让我发布跨域。不过我对此表示怀疑，因为我在其他可以发布跨域的项目中有 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

啊，是的……您正在处理跨域脚本问题。这不是 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 (Your API Docs)。您应该能够使用 Angular 的 JSONP 函数来访问您的 API 的 JSONP 功能。 (Angular.js JSONP docs)。

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