Angularjs 问题 - $http.get 不起作用并更改为 OPTIONS - 跨域答案

【问题标题】：Angularjs issue - $http.get not working and changed into OPTIONS - Cross domainAngularjs 问题 - $http.get 不起作用并更改为 OPTIONS - 跨域
【发布时间】：2014-10-30 23:11:46
【问题描述】：

我是 Angularjs 的新手，并尝试创建一个远程服务（位于“http://dev.testmyserver2”）以用于各种应用程序（位于“http://dev.testmyserver”）。

此服务使用 Colfusion 和 Oracle 数据库检索有关用户的各种数据。当我直接在浏览器中启动应用程序时，它可以完美运行。然而，当我尝试从另一个应用程序调用此服务的功能（在工厂中定义）时（感谢在此应用程序的主模块中调用的依赖项），http GET 在 OPTIONS 中被修改（在 firebug 中可见），我不能检索数据（http请求的状态码为O）。该函数被正确调用（警告“函数正确调用”或来自该函数的 console.log 被正确调用），但没有检索到此人的数据。

我认为这是跨域问题。但是不知道怎么解决。

这里有一点代码：

远程服务具有从数据库中检索数据的功能：

模块 - appRemoteService.js：

var app=angular.module('RemoteService', ['ngRoute', 'ui.bootstrap']);

app.config(function($routeProvider, $httpProvider, ngDialogProvider){

// disable IE ajax request caching
$httpProvider.defaults.cache = false;
if (!$httpProvider.defaults.headers.get) {
    $httpProvider.defaults.headers.get = {};
}
$httpProvider.defaults.headers.get['If-Modified-Since'] = '0';

// Create the routes
$routeProvider.when('/home',
{
  templateUrl: 'template/allPersons.html',
  controller: 'ctrlPersons'

})

.when('/documentation',
{
  templateUrl: 'template/documentation.html',
  controller: 'ctrlDocumentation'
})      

.otherwise({redirectTo:'/home'});  
});    

app.controller('ctrlPersons', function ($scope, FactoryRemoteService){
    FactoryRemoteService.getUserFromLogin("test").success(function(personInfo){
        alert(personInfo["VALUES"][0]["FIRSTNAME"]);
    });     
});

工厂 - appFactoryRemoteService.js：

app.factory('FactoryRemoteService', function($http){
var factory={};
factory.getUserFromLogin=function(uid){
    Alert("Function correctly called");
    return $http.get('http://dev.testmyserver2/myapp.cfc?method=getUserFromLogin&login=' + uid);
};

return factory; 
})

我的申请：

主文件 - index.html：

    <title>My app</title>

    <link rel="stylesheet" href="lib/css/bootstrap-3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="lib/css/bootstrap-3.1.1/css/bootstrap-theme.min.css">

    <link rel="stylesheet" href="css/styles.css" rel="stylesheet">
    <link rel="stylesheet" href="css/select.css" rel="stylesheet">  

</head>

<body>

    <div class="container">
        <div class="spacer navbar">

            <h1 class="nav nav-pills navbar-left">MY APP</h1>

            <ul class="nav nav-pills navbar-right" data-ng-controller="NavbarController">
                <li data-ng-class="{'active':getClass('/all-contacts')}"><a href="#/all-contacts">All contacts</a></li>
                <li data-ng-class="{'active':getClass('/add-contacts')}"><a href="#/add-contacts">Add contacts</a></li>
            </ul>

        </div>

        <ng-view></ng-view>

  </div>

  <script src="lib/js/angular.min.js"></script>
  <script src="lib/js/angular-route.min.js"></script>     
  <script src="lib/js/angular-sanitize.min.js"></script>      

  <script src="lib/js/bootstrap.min.js"></script>
  <script src="lib/js/jquery.min.js"></script>

  <script src="lib/js/ui-bootstrap-tpls-0.11.0.min.js"></script>     

  <script src="app/app.js"></script>
  <script src="app/appService.js"></script>

  <script src="http://dev.testmyserver2/app/appRemoteService.js"></script>
  <script src="http://dev.testmyserver2/app/appFactoryRemoteService.js"></script>     

</body>

模块 - app.js：

var app=angular.module('ContactsApp', ['ngRoute', 'ui.bootstrap', 'RemoteService']);

// register the interceptor as a service
app.factory('HttpInterceptor', ['$q', '$rootScope', function($q, $rootScope) {
   return {
        // On request success
        request : function(config) {
        // Return the config or wrap it in a promise if blank.
        return config || $q.when(config);
    },

    // On request failure
    requestError : function(rejection) {
        //console.log(rejection); // Contains the data about the error on the request.  
        // Return the promise rejection.
        return $q.reject(rejection);
    },

    // On response success
    response : function(response) {
        //console.log(response); // Contains the data from the response.
        // Return the response or promise.
        return response || $q.when(response);
    },

    // On response failure
    responseError : function(rejection) {
        //console.log(rejection); // Contains the data about the error.
        //Check whether the intercept param is set in the config array. 
        //If the intercept param is missing or set to true, we display a modal containing the error
        if (typeof rejection.config.intercept === 'undefined' || rejection.config.intercept)
        {
            //emitting an event to draw a modal using angular bootstrap
            $rootScope.$emit('errorModal', rejection.data);
        }
        // Return the promise rejection.
        return $q.reject(rejection);
    }
};
}]);

app.config(function($routeProvider, $httpProvider){
// disable IE ajax request caching
$httpProvider.defaults.cache = false;
if (!$httpProvider.defaults.headers.get) {
    $httpProvider.defaults.headers.get = {};
}   
$httpProvider.defaults.headers.get['If-Modified-Since'] = '0';

// Add the interceptor to the $httpProvider to intercept http calls
$httpProvider.interceptors.push('HttpInterceptor');

$routeProvider.when('/all-contacts',
{
  templateUrl: 'template/allContacts.html',
  controller: 'ctrlContacts'

})
.when('/view-contacts/:contactId',
{
  templateUrl: 'template/viewContact.html',
  controller: 'ctrlViewContacts'
})
.otherwise({redirectTo:'/all-contacts'});  

});    


app.controller('NavbarController', function($scope, $location){
$scope.getClass=function(path){     
    if($location.path().substr(0,path.length) == path){
        return true;
    }else{
        return false;
    }       
}
});

app.controller('ctrlViewContacts', function ($scope, $routeParams, RemoteServiceFactory){
$scope.contact = null;

// CALL OF THE REMOTE SERVICE
RemoteServiceFactory.getUserFromLogin("test")
.success(function(personInfo){
    alert(personInfo["VALUES"][0]["FIRSTNAME"]);
})
.error(function(personInfo, status){
    alert(status);
}); 
});

在各种论坛上多次搜索后，我测试了一些解决方案，但问题始终存在。

例如我尝试添加：

  //Enable cross domain calls
  $httpProvider.defaults.useXDomain = true;

  //Remove the header used to identify ajax call  that would prevent CORS from working
  delete $httpProvider.defaults.headers.common['X-Requested-With'];

或者

  //Reset headers to avoid OPTIONS request (aka preflight)
  $httpProvider.defaults.headers.common = {};
  $httpProvider.defaults.headers.post = {};
  $httpProvider.defaults.headers.put = {};
  $httpProvider.defaults.headers.patch = {};

您能帮我找到解决这个问题的方法吗？

非常感谢您的回复

【问题讨论】：

您的服务是否允许跨源请求 (cors)？从浏览器调用服务与javascript不同。
我不知道怎么看。此外，管理服务器的不是我
首先在 en.m.wikipedia.org/wiki/Cross-Origin_Resource_Sharing 阅读有关 cors 的内容，您应该对添加 cors 的内容、原因和方式有更好的了解。

标签： angularjs service dependency-injection cross-domain

【解决方案1】：

对于遇到同样问题的人，我通过使用XDomain 第三方库找到了解决方案。您必须在服务所在的远程服务器上实现一个proxy.html文件，并在主应用程序的脚本标签中调用该文件。

【讨论】：