AngularJS : Cross Domain Issue

Question

I have a Java web application called myApp running on localhost:8080/myApp

I created one AngularJS application using Yeoman, Grunt and bower.

In my angularJS application I have one HTML page to register user.

The Controller for the page is

register.js

angular.module('myAppRegister').controller('SignUpController', function($scope,$http) {
    $scope.user = {};
    $scope.registerUser=function()
    {
        $http({
              method: 'POST',
              url: 'http://localhost:8080/myApp/rest/registerUser',
              headers: {'Content-Type': 'application/json'},
              data:  $scope.user
            }).success(function (data) 
              {
                var strJSON=data;
                if(strJSON.status=="Success")
                {
                    $location.path( "/view2" );
                }
                else
                {
                    $scope.status=strJSON.userId+" : "+strJSON.status;
                }
              });
    }
});

I run it using grunt server . When I run the register page, in chrome browser console, it showing error

OPTIONS http://localhost:8080/myApp/rest/registerUser No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access.
XMLHttpRequest cannot load http://localhost:8080/myApp/rest/registerUser. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access. 

This is my Gruntfile.js

connect: {
      options: {
        port: 9000,
        // Change this to '0.0.0.0' to access the server from outside.
        hostname: 'localhost'
      },
      proxies: [
        {
            context: '/myApp',
            host: 'localhost',
            port: '8080',
            https: false,
            changeOrigin: false
        }
      ],
      livereload: {
        options: {
          middleware: function (connect) {
            return [
              lrSnippet,
              proxySnippet,
              mountFolder(connect, '.tmp'),
              mountFolder(connect, yeomanConfig.app)    
            ];
          }
        }
      },
      test: {
        options: {
          middleware: function (connect) {
            return [
              mountFolder(connect, '.tmp'),
              mountFolder(connect, 'test')
            ];
          }
        }
      },

I searched in Google, and added few lines in the above file.

livereload: {
        options: {
          middleware: function (connect) {
            return [
              lrSnippet,
              proxySnippet,
              mountFolder(connect, '.tmp'),
              mountFolder(connect, yeomanConfig.app),
              function(req, res, next) {
                res.setHeader('Access-Control-Allow-Origin', '*');
                res.setHeader('Access-Control-Allow-Methods', '*');
                next();
              } 
            ];
          }
        }
      },

And still I am getting the same errors. What am I doing wrong? And how can I solve this?

Answer 1

Does the call to rest/registerUser really have to be cross-domain? Judging from your code both the application and the REST interface run on localhost:8080 .

I guess the request is interpreted as cross-domain because you access the application in browser via 127.0.0.1:8080/myApp and your REST interface via localhost:8080/myApp .

To fix this you could just remove the domain and port from the $http call:

$http({
  method: 'POST',
  url: '/myApp/rest/registerUser',
  ...

Answer 2

You can use Apache proxy and connect your REST server with gruntjs(angular.js).

Apache would do this:

• proxy / -> gruntjs
• proxy /service -> REST server

you would use your application hitting Apache and angular.js application would think that is talking with itself so no cross domain problem.

Here is a great tutorial on how to set this up: http://alfrescoblog.com/2014/06/14/angular-js-activiti-webapp-with-activiti-rest/