AngularJS：跨域问题

Question

我有一个名为myApp的Java Web应用程序，正在localhost:8080/myApp上运行

我使用Yeoman，Grunt和bower创建了一个AngularJS应用程序。

在我的angularJS应用程序中，我有一个HTML页面来注册用户。

页面的控制器是

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

我使用grunt服务器运行它。当我在Chrome浏览器控制台中运行注册页面时，显示错误

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. 

这是我的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')
            ];
          }
        }
      },

我在Google中搜索，并在上述文件中添加了几行。

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

而且我仍然遇到相同的错误。我究竟做错了什么？我该如何解决呢？

Answer 1

对rest/registerUser的呼叫真的必须跨域吗？从您的代码来看，应用程序和REST接口都在localhost:8080上运行。

我想该请求被解释为跨域，因为您通过127.0.0.1:8080/myApp访问浏览器中的应用程序，并通过localhost:8080/myApp访问REST接口。

要解决此问题，您只需从$http调用中删除域和端口：

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

Answer 2

您可以使用Apache代理并将REST服务器与gruntjs（angular.js）连接。

Apache会这样做：

• 代理/-> gruntjs
• 代理/服务-> REST服务器

您将使用您的应用程序来访问Apache，而angular.js应用程序会认为这是在与自身对话，因此没有跨域问题。

这里是一个很棒的教程，关于如何设置：http://alfrescoblog.com/2014/06/14/angular-js-activiti-webapp-with-activiti-rest/