AngularJS :跨域问题

Question

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

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

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

页面的控制器是

注册.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;
                }
              });
    }
});

我使用咕噜咕噜的服务器运行它。当我在 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. 

这是我的咕噜咕噜文件.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')
            ];
          }
        }
      },

我在谷歌上搜索，并在上面的文件中添加了几行。

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 代理并使用 gruntjs（angular.js 连接您的 REST 服务器。

Apache会这样做：

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

您将使用您的应用程序点击 Apache 和 Angular.js应用程序会认为这是在与自己交谈，因此没有跨域问题。

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