Question

我正在使用angularjs构建混合应用程序，我正在尝试从外部源调用该服务。但当我打电话给网址时，我收到了错误

XMLHttpRequest cannot load https:XXXX/xxx.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

这是我的代码

app.controller('overview', function($scope, $http) {
    $http({
        method : "GET",
        url : "https://ysaf.XXXX.yourcxxxxx/resource.json"
    }).then(function appSucces(response) {
        $scope.resources = response.data;
    }, function appError(response) {
        $scope.resources = response.statusText;
    });
});

如果我调用本地.json文件我没有收到任何错误，但是，只有当我调用外部api时，我才会收到此错误。

我在这段代码中有什么问题吗？

Answer 1

Access-Control-Allow-Origin设置在来自服务器的响应上，这不是客户端请求，以允许来自不同来源的客户端访问响应。

在这种情况下，https://ysaf.XXXX.yourcxxxxx/resource.json不允许您的来源有权访问回复。因此你无法阅读它。

Answer 2

添加必需的标头，例如Access-Control-Allow-Origin: *。

您面临的问题是CORS问题。 CORS - Cross Origin Resource Sharing

以下情况会发生CORS问题

1）如果我们是abc.com并访问xyz.com（不同的域名）

2）如果我们在http://localhost:8080/myapplication并访问http://localhost:9080/anotherapplication（不同的端口）

Answer 3

您应该为您的开发下载此扩展程序：

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

它将解决所有Access-Control-Allow-Origin个问题：）

不要忘记在停止开发时禁用它，这可能是网页导航的问题。

无法从远程json加载数据

3 个答案: