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

我正在使用app，并尝试使用

$http

从服务器（MarkLogic）获取JSON响应。我已经试了3天了，试过了其他类似答案的每一个回复，但都没能成功。请帮忙

浏览器将返回以下内容：

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'];
}]);

'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");
  }]);

'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'
     });
 }
});

controllers.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'];
}]);

'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");
  }]);

'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'
     });
 }
});

services.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'];
}]);

'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");
  }]);

'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'
     });
 }
});

---

useXDomain

不是一件事

你确实有一个同源的问题。为了使您的请求生效，您需要更改请求的标题。因为您正在发出一个简单的

GET

请求，所以只要它是一个。您的内容类型可能是将请求标记为CORS请求的内容

通常-通过将

内容类型

标题设置为

应用程序/x-www-form-urlencoded

，

多部分/表单数据

，或

文本/普通

，可以解决此问题，如下所示：

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

或者-您可以设置一个拦截器，并向满足某些条件的所有请求添加头

---

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

useXDomain

不是一件事

你确实有一个同源的问题。为了使您的请求生效，您需要更改请求的标题。因为您正在发出一个简单的

GET

请求，所以只要它是一个。您的内容类型可能是将请求标记为CORS请求的内容

通常-通过将

内容类型

标题设置为

应用程序/x-www-form-urlencoded

，

多部分/表单数据

，或

文本/普通

，可以解决此问题，如下所示：

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

或者-您可以设置一个拦截器，并向满足某些条件的所有请求添加头

---

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

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

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

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

从项目的主目录

python3 -m http.server 8080

---

然后转到url

localhost:8080/index.html

，你就成功了

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

从项目的主目录

python3 -m http.server 8080

---

---

然后转到url

localhost:8080/index.html

，你就成功了

请求的资源上不存在“Access Control Allow Origin”标头

表示它需要来自服务器的标头。您是否已将此标头添加到服务器响应中？你不能用客户端的更改来解决这个问题。啊！我认为它可以单独在客户端处理。让我再试一次（用正确的方法）&再打给你。谢谢你，先生！在服务器响应代码中添加了头并使其正常工作。谢谢你，大卫。这纯粹是一个服务器端配置，因为Angular已经默认发送了Origin头。@Sudhakar你添加了什么头？你是怎么加上去的？谢谢。

请求的资源上不存在“Access Control Allow Origin”标头

意味着它需要来自服务器的标头。您是否已将此标头添加到服务器响应中？你不能用客户端的更改来解决这个问题。啊！我认为它可以单独在客户端处理。让我再试一次（用正确的方法）&再打给你。谢谢你，先生！在服务器响应代码中添加了头并使其正常工作。谢谢你，大卫。这纯粹是一个服务器端配置，因为Angular已经默认发送了Origin头。@Sudhakar你添加了什么头？你是怎么加上去的？谢谢。我是按照这里的指示做的。不管怎样，它现在对我有效。谢谢你的回复。谢谢你！一切都很好。很多人都看过这个博客（还有其他类似的博客），发布了这个根本不存在的

useXDomain

功能，实际上它从来没有出现在AngularJs中。啊!！我懂了。谢谢你的澄清。@ Sudhakar，请考虑接受答案（如果可能的话），如果它有助于解决你的问题。我遵照这里给出的指示。不管怎样，它现在对我有效。谢谢你的回复。谢谢你！一切都很好。很多人都看过这个博客（还有其他类似的博客），发布了这个根本不存在的

useXDomain

功能，实际上它从来没有出现在AngularJs中。啊!！我懂了。谢谢你的澄清。@ Sudhakar，请考虑接受答案（如果可能的话），如果它有助于解决你的问题。它对我来说似乎不起作用。我必须将服务器端响应头更改为workI used PHP内置服务器！：）这似乎对我不起作用。我必须将服务器端响应头更改为workI used PHP内置服务器！：）