Impossible de contourner CORS dans l'application de semences angularjs

Question

J'utilise l'application angularjs-seed et j'essaie d'obtenir une réponse JSON du serveur (MarkLogic) en utilisant $http. J'y ai été pendant 3 jours essayé toutes les réponses d'autres réponses similaires stackoverflow mais pas en mesure de le faire fonctionner. S'il vous plaît aider!

Le navigateur renvoie ceci:

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. 

Voici mon code de l'application

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

de 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 est pas une chose.

Vous avez en effet un problème de même origine. Pour que votre demande fonctionne, vous devez modifier vos en-têtes sur la demande. Puisque vous faites une demande simple GET, vous devriez être en mesure de le faire, à condition que ce soit un simple request. Votre type de contenu est probablement ce qui marque la demande comme une demande CORS.

Habituellement - cela peut être fixé en réglant votre tête content-type-application/x-www-form-urlencoded, multipart/form-data ou text/plain, comme ceci:

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

Ou - vous pouvez configurer un intercepteur et ajouter des en-têtes à toutes les réunions des demandes des critères .

Pour les demandes non simples, qui peuvent obtenir preflighted, vous devrez travailler plus avec les en-têtes de la requête et vous assurer que les en-têtes de réponse satisfont la demande de contrôle en amont. Si vous n'avez pas accès au serveur (pour définir les en-têtes de réponse), vous devrez travailler dans leurs paramètres autorisés. Here est un peu plus d'informations sur CORS.

Answer 2

Je résolu ce problèmes en utilisant express.js comme un serveur proxy qui me permet également de servir du contenu statique usinf le proxy

Answer 3

Vous devez exécuter un serveur HTTP - moyen le plus simple est d'utiliser python

de le répertoire principal du projet ...

python3 -m http.server 8080 

Ensuite, allez à l'adresse localhost:8080/index.html et you'r d'or!