javascript - AngularJS : Cross Domain Issue

Question

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

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

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

页面的 Controller 是

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 接口(interface)都运行在 localhost:8080 上。 。

我猜该请求被解释为跨域，因为您通过 127.0.0.1:8080/myApp 在浏览器中访问该应用程序和您的 REST 接口(interface)通过 localhost:8080/myApp .

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

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