Question

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

我使用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会这样做：

proxy / - ＆gt; gruntjs
代理/服务 - ＆gt; REST服务器

你会使用你的应用程序击中Apache而angular.js应用程序会认为这是在与自己交谈所以没有跨域问题。

以下是有关如何设置此内容的精彩教程：http://alfrescoblog.com/2014/06/14/angular-js-activiti-webapp-with-activiti-rest/

AngularJS：跨域问题

2 个答案: