Question

我正在开发一个使用angularJS的小应用程序。 html页面是本地文件，不会部署在Web服务器上。我定义了一个服务模块，它将调用远程webapi来获取json数据，但是不能调用我的成功回调。

 $http({ method: 'GET', url: remoteServiceUri }).
 success(function (data, status) {
 var response = data;
 }).
 error(function (data, status) {
 var error = data;
 });

它总是调用错误方法。我该如何解决这个问题？我可以确认服务api工作正常，因为我尝试在同一个站点上部署页面和webapi，在这种情况下，它可以工作。

这是由跨域还是所需的任何配置引起的？感谢。

Answer 1

您需要配置远程Web服务以处理预检OPTIONS请求。

您的网络服务必须将以下标头添加到预检OPTIONS请求的响应以及实际请求中：

{
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Expose-Headers": "Content-Type",
    "Access-Control-Allow-Methods": "GET,POST,PUT,DELETE,OPTIONS",
    "Access-Control-Allow-Headers": "Content-Type"
}

您可以找到有关哪些标题需要的详细信息，以及它们的含义：https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Answer 2

如果您使用的是Apache，则可以使用proxypass重定向请求。通过这种方式，您的角度应用会在本地和＃34;使用您的apache服务器，它会将请求传递到其他域。

例如，在httpd.conf中设置：

ProxyPass /foo http://foo.example.com/bar

在你的角应用程序调用中

$http({ method: 'GET', url: "/foo/action" }).then(...);

你的apache会翻译＆＃34; / foo / action＆＃34;到＆＃34; http://foo.example.com/bar/action＆＃34;。再见跨域问题！

有关详细信息，请参阅apache proxy module

angularJS $ http.get（）成功回调不能在跨域调用

2 个答案: