Question

我的工厂方法：

angular.module('ymusica').factory('Albums', ['$http', function($http) {
return {
    query: function(term) {
        return $http.get('/api/album', { params: { q: term } });
    }
 };
}]);

IT不起作用，意味着它不会返回任何内容。如果我的api路径不正确，那么我该如何纠正呢。这里我使用rx.js，rx.time.js，rx.coincidence和typeahead.js。请帮我解决这个问题。感谢...

控制台错误：

这是我的controller.js：

angular.module('ymusica').controller('AlbumSearch', ['$scope', 'Albums', 'Artists', '$q', function($scope, albums, artists, $q) {

$scope.albums = [];
$scope.artists = [];

var watchToObservable = function(scope, expression) {
    var observable = new Rx.Subject();

    scope.$watch(expression, observable.onNext.bind(observable));

    return observable;
}

var functionToObservable = function(scope, name) {

    var observable = new Rx.Subject();

    scope[name] = function(value) {
        observable.onNext(value);
    };

    return observable;
}

var terms = functionToObservable($scope, 'searchMusic');

terms.sample(250)
    .select(function(term) {
        var promise = $q.all([albums.query(term), artists.query(term)]);
        return Rx.promiseToObservable(promise)
    })
    .switchLatest()
    .select(function(promise) { return [promise[0].data.albums, promise[1].data.artists]; })
    .subscribe(function(result) {
        $scope.albums = result[0].slice(0, 5);
        $scope.artists = result[1].slice(0, 5);
        $scope.music = $scope.albums.concat($scope.artists);
    });

$scope.selectMusic = function(item) {
    console.log('music selected!', item);
    $scope.term = item.name;
};

$scope.imageSource = function(item) {
    return item.images['medium'];
};

$scope.hasAlbums = function() {
    return $scope.albums.length > 0;
};

$scope.hasArtists = function() {
    return $scope.artists.length > 0;
};

}]);

Answer 1

404，状态显示，表示客户端错误。您的API路径不正确

Answer 2

如果使用http服务，则无法直接从文件系统运行AngularJS应用程序。这就是它给CORS错误的原因。因为您正在尝试从文件协议触发http请求。要使用$ http服务，您需要一台服务器。要在本地测试它，您可以在您的计算机上安装wamp / xampp服务器。

Answer 3

显示跨区域请求错误当您的Web应用程序位于差异服务器且Web api位于不同的api上时，会出现此错误

假设您的网址位于：192.168.0.1

你是请求api at 192.168.0.65

如果没有，请确保同一服务器上的web和api，然后允许跨区域请求

Answer 4

因此，从提供的屏幕截图中可以看出有两个问题：

Cross-origin无法加载file：//
status 404

对于第一个问题，有许多线程已经处理了交叉源请求或CORS，因为它在一般术语中使用。您可以查看其中一些线程，例如：

XMLHttpRequest cannot load file. Cross origin requests are only supported for HTTP
AngularJS Error: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https
XMLHttpRequest cannot load file. Cross origin requests are only supported for HTTP. angular.js

所以，基本上这意味着它显示错误，因为你直接尝试运行该文件而不是它应该是：http://localhost:8080/index.html或类似的东西。

一个简单的修复方法是：将其部署到本地或远程的Web服务器。更复杂的是： *安装http-server和 *在您的app目录中运行http服务器

npm install -g http-server

安装完成后，执行：

cd <YOUR_APP_LOCATION>
http-server 
#OR
http-server -p 9090 -a 0.0.0.0 #this will start the webserver on port 9090

您现在可以打开网址：http://localhost:8080/或http://127.0.0.1:9090/，这些CORS错误应该消失。

**状态404 **问题看起来工厂中指定的路径不正确：

return $http.get('/api/album', { params: { q: term } });

您可以检查一下您的路径并在工厂中更正吗？这应该是你的问题。

$ http.get不返回任何内容

4 个答案: