angularjs - How to allow cross domain request -
i using $resource make http calls,my backend application deployed on different port. when trying fetch data server using request method(get),my browser automatically attaching request method(options). read nice articles browser behavior,but couldn't find issue.
i allow access-control-allow-methods on server,but not working
i don't have knowledge server requests,please tell me going wrong there,why ?
my grunt configuration is
'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 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 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} build type can production/development/staging*/ grunt.registertask('build', 'build production ready app', function (n) { if (n == null) { grunt.warn('build type must specified'); } //remove console 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 development live reload server', function (n) { console.log("server" + n); if (n == null) { grunt.warn('build type must specified'); } grunt.task.run('ngconstant:' + n, 'less:dev', 'connect:devel', 'watch:json' // 'concurrent:dev' ); }); grunt.registertask('default', 'run servers.', [ 'server' ]); grunt.event.on('watch', function (action, filepath, target) { //grunt.task.run('server'); }); }; my service is
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'} }); }]); my controller
'use strict';
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){ }); } }]);
actually browser makes preflight request before actuall request http request method "options" . have send 200 ok request , allow cross domain header like
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; }
Comments
Post a Comment