Question

我正在使用angularjs-seed应用，并尝试使用$http从服务器（MarkLogic）获取JSON响应。我已经使用了3天，尝试了其他类似的stackoverflow答案的每个响应，但无法使其正常工作。请帮忙！

浏览器返回：

XMLHttpRequest cannot load http://sreddy:8003/v1/search?format=json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access.

这是我的应用代码

app.js

'use strict';


// Declare app level module which depends on filters, and services
var app = angular.module('myApp', [
  'ngRoute',
  'myApp.filters',
  'myApp.services',
  'myApp.directives',
  'myApp.controllers'
]);

app.config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider) {
  $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
  $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
  $routeProvider.otherwise({redirectTo: '/view1'});

  // to avoid CORS
  $httpProvider.defaults.withCredentials = true;
  $httpProvider.defaults.useXDomain = true;
  delete $httpProvider.defaults.headers.common['X-Requested-With'];
}]);

controllers.js

'use strict';

/* Controllers */

var app = angular.module('myApp.controllers', []);


app.controller('MyCtrl1', ['$scope', 'dataService', function($scope, dataService) {
      $scope.test = "test";
      $scope.data = null;
      dataService.getData().then(function (dataResponse) {
          $scope.data = dataResponse;
      });
      console.log($scope.data);
  }]);

  app.controller('MyCtrl2', [function() {
      console.log("from MyCtrl2");
  }]);

services.js

'use strict';

/* Services */


// Demonstrate how to register services
// In this case it is a simple value service.
var app = angular.module('myApp.services', []);

app.value('version', '0.1');

app.service('dataService', function($http) {

this.getData = function() {
    // $http() returns a $promise that we can add handlers with .then()
    return $http({
        method: 'GET',
        url: 'http://sreddy:8003/v1/search?format=json'
     });
 }
});

Answer 1

useXDomain不是一件事。

你确实有同源问题。为了使您的请求有效，您需要在请求中更改标头。由于您要发出一个简单的GET请求，因此您应该能够执行此操作，前提是它是simple request。您的内容类型很可能是将请求标记为CORS请求。

通常 - 可以通过将content-type标题设置为application/x-www-form-urlencoded，multipart/form-data或text/plain来解决此问题，如下所示：

$http({
    method: 'GET',
    url: 'http://sreddy:8003/v1/search?format=json',
    headers: {'Content-Type':'text/plain'} //or whatever type
 });

或者 - 您可以设置拦截器并为符合某些条件的所有请求添加标头。

对于可能获得preflighted的非简单请求，除了确保响应标头满足预检请求之外，您还需要更多地处理请求标头。如果您无权访问服务器（设置响应标头），则必须在其允许的参数范围内工作。 Here是关于CORS的更多信息。

Answer 2

您需要运行http服务器 - 最简单的方法是使用python

来自项目的主目录...

python3 -m http.server 8080

然后转到网址localhost:8080/index.html，你就是金色的！

Answer 3

我通过使用express.js作为代理服务器解决了这个问题，这也使我能够使用代理服务器提供静态内容

无法绕过angularjs种子应用程序中的CORS

3 个答案: