访问 JSON 本地文件时出现 Cors 错误

Question

我在尝试访问本地 JSON 文件时遇到错误。这是我从 json 中获取数据的功能。

        $scope.getJSON = function () {
        (self.servicioObj = jsonFactory.GetJson('data.json')).then(
                function (dataResponse) {
                    $scope.datosJson = [];
                    $scope.datosJson = dataResponse.data;
                    self.servicioObj.detenerTiempo();
                }, function (error) {
            self.servicioObj.detenerTiempo();
        });
    }

这是我的工厂代码。

    function jsonFactory($http, $q) {

    var self = this;

    self.urlBase = 'http://192.168.0.17:8383/NewFrontEnd/app/pages/';
    self.jsonFactory = {};
    self.tiempoEspera = 120000;
    self.jsonFactory.GetJson = function (metodo) {
        var tiempo = $q.defer();
        var url = self.urlBase + metodo;
        var peticion = $http({
            method: 'get',
            url: url,
            headers: {'Access-Control-Allow-Origin': '*'},
            cache: false,
            timeout: tiempo.promise
        });
      return self.jsonFactory;
      }

当我调用 getJSON 函数时，我收到此错误消息。

XMLHttpRequest cannot load http://192.168.0.17:8383/NewFrontEnd/app/pages/data.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8383' is therefore not allowed access.

如果我输入 urlBase localhost 而不是 192.168.0.17 我不知道为什么会出现此错误，我可以毫无问题地访问 JSON 文件

Answer 1

如果我输入 urlBase localhost 而不是 192.168.0.17，为什么会出现此错误

因为localhost 和192.168.0.17 是不同的主机名，所以它们是不同的来源。

如果您在一个上加载 HTML 文档并使用 XHR 请求另一个，您将发出跨域请求。

不要混合来源或配置服务器以输出适当的Access-Control-Allow-Origin 标头。