[英]AngularJS : Cross Domain Issue
I have a Java web application called myApp running on localhost:8080/myApp
我有一个名为myApp的 Java Web 应用程序在localhost:8080/myApp
上运行
I created one AngularJS application using Yeoman, Grunt and bower.我使用 Yeoman、Grunt 和 bower 创建了一个 AngularJS 应用程序。
In my angularJS application I have one HTML page to register user.在我的 angularJS 应用程序中,我有一个 HTML 页面来注册用户。
The Controller for the page is页面的控制器是
register.js注册.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 .我使用grunt server运行它。 When I run the register page, in chrome browser console, it showing error当我运行注册页面时,在 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.
This is my Gruntfile.js这是我的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?我该如何解决这个问题?
Does the call to rest/registerUser
really have to be cross-domain?对rest/registerUser
的调用真的必须是跨域的吗? Judging from your code both the application and the REST interface run on localhost:8080
.从您的代码来看,应用程序和 REST 接口都在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
.我猜该请求被解释为跨域,因为您通过127.0.0.1:8080/myApp
访问浏览器中的应用程序,通过localhost:8080/myApp
访问您的 REST 接口。
To fix this you could just remove the domain and port from the $http
call:要解决此问题,您可以从$http
调用中删除域和端口:
$http({
method: 'POST',
url: '/myApp/rest/registerUser',
...
You can use Apache proxy and connect your REST server with gruntjs(angular.js).您可以使用 Apache 代理并使用 gruntjs(angular.js) 连接您的 REST 服务器。
Apache would do this: Apache 会这样做:
you would use your application hitting Apache and angular.js application would think that is talking with itself so no cross domain problem.您会使用您的应用程序访问 Apache,而 angular.js 应用程序会认为这是在与自己对话,因此没有跨域问题。
Here is a great tutorial on how to set this up: http://alfrescoblog.com/2014/06/14/angular-js-activiti-webapp-with-activiti-rest/这是一个关于如何设置的很棒的教程: http : //alfrescoblog.com/2014/06/14/angular-js-activiti-webapp-with-activiti-rest/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.