2015-07-21 150 views
0

我使用$资源进行http调用,我的后端应用程序部署在不同的端口上。当我试图使用请求方法(GET)从服务器获取数据时,我的浏览器自动附加请求方法(OPTIONS)。我阅读了关于浏览器行为的好文章,但找不到问题。如何允许跨域请求

我允许对服务器的访问控制允许的方法,但它不工作

我没有对服务器的请求的知识,请告诉我是怎么回事错在那里,为什么它是什么?

我咕噜配置

'use strict'; 

module.exports = function (grunt) { 

    require('autostrip-json-comments'); 
    var fs = require('fs'); 
    // Load grunt tasks automatically 
    require('load-grunt-tasks')(grunt); 

    var appSettings = require('./config/application.conf.json'); 

    grunt.initConfig({ 


     // Set the application settings 
     settings: appSettings, 


     connect: { 
      options: { 
       hostname: '<%= settings.dev.hostname %>', 
       port: '<%= settings.dev.port %>', 
       livereload: '<%= settings.dev.liveReloadPort %>', 
       options: { 
        index: 'index.html', 
        maxAge: 300000 
       } 
      }, 
      livereload: { 
       options: { 
        open: true, 
        base: [ 
      '.tmp', 
      '<%= settings.dev.dir %>' 
      ], 
        index: 'index.html' 
       } 
      }, 
      devel: { 
       options: { 
        port: '<%= settings.dev.port %>', 
        hostname: '<%= settings.dev.hostname %>', 
        base: { 
         path: '<%= settings.dev.dir %>', 
         options: { 
          index: 'index.html' 
         } 
        }, 
        middleware: function (connect, options, middlewares) { 
         middlewares.unshift(function (req, res, next) { 
          res.setHeader('Access-Control-Allow-Origin', '*'); 
          res.setHeader('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS'); 
          return next(); 

         }); 

         return middlewares; 
        } 
       } 
      }, 
      dist: { 
       options: { 
        port: '<%= settings.dist.port %>', 
        hostname: '<%= settings.dist.hostname %>', 
        base: { 
         path: '<%= settings.dist.dir %>', 
         options: { 
          index: 'index.html', 
          maxAge: 300000 
         } 
        }, 
        middleware: function (connect, options, middlewares) { 
         middlewares.unshift(function (req, res, next) { 
          res.setHeader('Access-Control-Allow-Origin', '*'); 
          res.setHeader('Access-Control-Allow-Methods', '*'); 
          return next(); 

         }); 

         return middlewares; 
        } 
       } 
      }, 
     }, 
     watch: { 
      json: { 
       files: ['<%= settings.dev.dir %>/**/*.json', '!<%= settings.dev.dir %>/core/*.json'], 
       tasks: ['ngconstant:development' 
       ] 
      } 
     }, 
     // jsHint config 
     jshint: { 
      options: { 
       jshintrc: __dirname + '/.jshintrc', 
       reporter: require('jshint-stylish'), 
       force: true 
      }, 
      all: [ 
     // 'Gruntfile.js', 
     '<%= settings.dev.dir %>/scripts/**/*.js' 
     ], 
     }, 
     uglify: { 
      options: { 
       mangle: false, 
       compress: { 
        drop_console: true 
       } 
      } 
     }, 
     less: { 
      dist: { 
       options: { 
        style: 'expanded', 
        compass: false 
       }, 
       files: { 
        '<%= settings.dist.dir%>/assets/css/application.css': '<%= settings.dev.dir%>/assets/less/application.less' 
       } 
      }, 
      dev: { 
       options: { 
        style: 'expanded', 
        compass: false, 
        sourceMap:'true', 
        sourceMapFilename: '<%= settings.dev.dir%>/assets/css/application.css.map', 
        sourceMapURL: '<%= settings.dev.dir%>/assets/css/application.css.map', 
        sourceMapBasepath: '<%= settings.dev.dir%>/assets/css/application.css.map' 
       }, 
       files: { 
        '<%= settings.dev.dir%>/assets/css/application.css': '<%= settings.dev.dir%>/assets/less/application.less' 
       } 
      }, 
     }, 
     cssmin: { 
      target: { 
       files: [{ 
        expand: true, 
        cwd: '<%= settings.dist.dir %>/assets/css', 
        src: ['*.css', '!bower_components/**'], 
        dest: '<%= settings.dist.dir %>/assets/css', 
        ext: '.min.css' 
     }] 
      } 
     }, 
     clean: { 
      dist: { 
       files: [{ 
        dot: true, 
        src: [ 
      '.tmp', 
      '<%= settings.dist.dir %>/*', 
      '!<%= settings.dist.dir %>/.git*' 
      ] 
     }] 
      }, 
      server: '.tmp', 
      docs: '<%= settings.docs.dir %>', 
      coverage: '<%= settings.test.coverage.dir %>' 
     }, 

     // Copy config 
     copy: { 
      dist: { 
       files: [{ 
        expand: true, 
        cwd: '<%= settings.dev.dir %>', 
        dest: '<%= settings.dist.dir %>', 
        src: ['**/**', '!assets/less/**'] 
     }] 
      } 
     }, 
     ngconstant: { 
      // Options for all targets 
      // Environment targets 
      development: { 
       options: { 
        dest: '<%= settings.dev.dir %>/core/config.constant.js', 
        space: ' ', 
        wrap: '\n\n {%= __ngModule %}', 
        name: 'Config', 
       }, 
       constants: { 
        $enviornment: require('./config/development.json') 
       } 
      }, 
      production: { 
       options: { 
        dest: '<%= settings.dev.dir %>/core/config.constant.js', 
        space: ' ', 
        wrap: '\n\n {%= __ngModule %}', 
        name: 'Config', 
       }, 
       constants: { 
        $enviornment: require('./config/production.json') 
       } 
      }, 
     } 

    }); 
    /* @discription 
    n {string} it is build type can be production/development/staging*/ 
    grunt.registerTask('build', 'Build a production ready app', function (n) { 
     if (n == null) { 
      grunt.warn('Build type must be specified'); 
     } 

     //remove console from script 
     if (n == "production") { 
      grunt.config('uglify.options.compress.drop_console', true); 
     } else { 
      grunt.config('uglify.options.compress.drop_console', false); 
     } 



     //grunt.config('copy.vendor.files[0].src', finalCopyFiles); 


     grunt.task.run('clean:dist', 
      'ngconstant:' + n,    
      'copy:dist',   
      'cssmin', 
      'uglify', 
      'less:dist'   
     ); 
    }); 

    grunt.registerTask('server', 'Start up the development live reload server', function (n) { 
     console.log("server" + n); 
     if (n == null) { 
      grunt.warn('Build type must be specified'); 
     } 
     grunt.task.run('ngconstant:' + n, 
      'less:dev',   
      'connect:devel', 
      'watch:json' 
      // 'concurrent:dev' 
     ); 
    }); 
    grunt.registerTask('default', 'Run all servers.', [ 
    'server' 
    ]); 

    grunt.event.on('watch', function (action, filepath, target) { 
     //grunt.task.run('server'); 
    }); 


}; 

我的服务就是

angular.module('samepinch.login').factory('LoginService', ['$resource','$enviornment', function ($resource,$enviornment) { 
    var url = $enviornment.backendurl; 
    return $resource(url+'authenticate',{},{ 
     query: {method:'GET', params:{itemId:''}, isArray:true}, 
     post: {method:'POST'}, 
     update: {method:'PUT', params: {itemId: '@entryId'}}, 
      remove: {method:'DELETE'} 
    }); 
}]); 

我的控制器

'使用严格的';

angular.module('samepinch.login').controller('LoginController',['$scope','LoginService','$rootScope',function($scope,LoginService,$rootScope){ 

    $rootScope.isLoginPage  = true; 
    $rootScope.isLightLoginPage = false; 
    $rootScope.isLockscreenPage = false; 
    $rootScope.isMainPage   = false; 

    $scope.register = function(credentials){ 
     LoginService.query(credentials,function(success){ 

     },function(error){ 

     }); 
    } 

}]); 

回答

0

实际上,浏览器在执行请求之前使用http请求方法“options”进行预检请求。因此您必须向此请求发送200 OK并允许跨域域标头,如

httpResponse.setHeader("Access-Control-Allow-Origin", "*"); 
    httpResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE,PUT"); 
    httpResponse.setHeader("Access-Control-Max-Age", "3600"); 
    httpResponse.setHeader("Access-Control-Allow-Headers", "x-requested-with,Authorization, Content-Type"); 
    if(httpRequest.getMethod().equals("OPTIONS")){ 
     httpResponse.setStatus(HttpServletResponse.SC_ACCEPTED); 
     return; 
    }