前言
java语言在多数时，会作为一个后端语言，为前端的php,node.js等提供api接口。前端通过ajax请求去调用java的api服务。今天以node.js为例，介绍两种跨域方式：crossorigin和反向代理。
一、准备工作
pom.xml：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
<?xml version="1.0" encoding="utf-8"?>
<project xmlns="http://maven.apache.org/pom/4.0.0" xmlns:xsi="http://www.w3.org/2001/xmlschema-instance"
xsi:schemalocation="http://maven.apache.org/pom/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelversion>4.0.0</modelversion>
<groupid>com.example</groupid>
<artifactid>spring-boot-15</artifactid>
<version>0.0.1-snapshot</version>
<packaging>jar</packaging>
<name>spring-boot-15</name>
<description>demo project for spring boot</description>
<parent>
<groupid>org.springframework.boot</groupid>
<artifactid>spring-boot-starter-parent</artifactid>
<version>1.5.3.release</version>
<relativepath/> <!-- lookup parent from repository -->
</parent>
<properties>
<project.build.sourceencoding>utf-8</project.build.sourceencoding>
<project.reporting.outputencoding>utf-8</project.reporting.outputencoding>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupid>org.springframework.boot</groupid>
<artifactid>spring-boot-starter-web</artifactid>
</dependency>
<dependency>
<groupid>org.springframework.boot</groupid>
<artifactid>spring-boot-devtools</artifactid>
<scope>runtime</scope>
</dependency>
<dependency>
<groupid>org.springframework.boot</groupid>
<artifactid>spring-boot-starter-test</artifactid>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupid>org.springframework.boot</groupid>
<artifactid>spring-boot-maven-plugin</artifactid>
</plugin>
</plugins>
</build>
</project>
|
pom.xml
app.java
|
1
2
3
4
5
6
7
8
9
|
package com.example;
import org.springframework.boot.springapplication;
import org.springframework.boot.autoconfigure.springbootapplication
@springbootapplication
public class app {
public static void main(string[] args) {
springapplication.run(app.class, args);
}
}
|
user.java
|
1
2
3
4
5
6
|
package com.example;
public class user {
public int id;
public string name;
public int age;
}
|
maincontroller.java：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
package com.example;
import java.util.arraylist;
import java.util.list;
import org.springframework.web.bind.annotation.getmapping;
import org.springframework.web.bind.annotation.restcontroller;
/**
* *
*/
@restcontroller
public class maincontroller {
@getmapping("findalluser")
public list<user> findalluser() {
list<user> list = new arraylist<>();
for (int i = 0; i < 20; i++) {
user user = new user();
list.add(user);
user.id = i;
user.name = "name_" + i;
user.age = 20 + i;
}
return list;
}
}
|
项目结构如下图所示：
访问http://localhost:8080/findalluser
使用hbuilder创建node.js express项目：
选择ejs模板引擎：
index.ejs文件代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<!doctype html>
<html>
<head>
<title>
<%= title %>
</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<script src="//cdn.bootcss.com/angular.js/1.5.6/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('app', []);
app.controller('maincontroller', function($rootscope, $scope, $http) {
$http({
method: 'get',
url: 'http://localhost:8080/findalluser'
}).then(function successcallback(r) {
$scope.rows = r.data;
});
});
</script>
</head>
<body ng-app="app" ng-controller="maincontroller">
<h1><%= title %></h1>
<p>welcome to
<%= title %>
</p>
<br />
<table>
<tr ng-repeat="row in rows">
<td>{{row.id}}</td>
<td>{{row.name}}</td>
<td>{{row.age}}</td>
</tr>
</table>
</body>
</html>
|
通过angular.js的http方法调用api请求
右键运行项目：
运行效果：
发现调用ajax请求时跨域失败。
二、spring boot后台设置允许跨域
这时，修改maincontroller类，在方法前加@crossorigin注解：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
/**
*
*
*/
@restcontroller
public class maincontroller {
@crossorigin(origins = "http://localhost:3000")
@getmapping("findalluser")
public list<user> findalluser() {
list<user> list = new arraylist<>();
for (int i = 0; i < 20; i++) {
user user = new user();
list.add(user);
user.id = i;
user.name = "name_" + i;
user.age = 20 + i;
}
return list;
}
}
|
这是声明findalluser方法允许跨域，
也可以修改app.java，来实现全局跨域：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
package com.example;
import org.springframework.boot.springapplication;
import org.springframework.boot.autoconfigure.springbootapplication;
import org.springframework.context.annotation.bean;
import org.springframework.web.servlet.config.annotation.corsregistry;
import org.springframework.web.servlet.config.annotation.webmvcconfigurer;
import org.springframework.web.servlet.config.annotation.webmvcconfigureradapter;
@springbootapplication
public class app {
public static void main(string[] args) {
springapplication.run(app.class, args);
}
@bean
public webmvcconfigurer corsconfigurer() {
return new webmvcconfigureradapter() {
@override
public void addcorsmappings(corsregistry registry) {
registry.addmapping("/**").allowedorigins("http://localhost:3000");
}
};
}
}
|
registry.addmapping("/**")：为根目录的全部请求，也可以设置为"/user/**"，这意味着是user目录下的所有请求。
在访问http://localhost:3000，效果如下：
三、通过node.js的方向代理实现跨域
node.js提供了一些反向代理的中间件，能轻而易举的实现跨域，而不需要spring boot做任何设置。
安装express-http-proxy中间件
npm install --save-dev express-http-proxy
修改app.js文件，使其支持反向代理：
|
1
2
3
|
var proxy = require('express-http-proxy');
var apiproxy = proxy('http://localhost:8080', {});
app.use('/api', apiproxy);
|
以“/api”开头的请求转发为spring boot的api服务。
完整代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
/**
* module dependencies.
*/
var express = require('express')
, routes = require('./routes')
, user = require('./routes/user')
, http = require('http')
, path = require('path');
var app = express();
// all environments
app.set('port', process.env.port || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyparser());
app.use(express.methodoverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
// development only
if ('development' == app.get('env')) {
app.use(express.errorhandler());
}
var proxy = require('express-http-proxy');
var apiproxy = proxy('http://localhost:8080', {});
app.use('/api', apiproxy);
app.get('/', routes.index);
app.get('/users', user.list);
http.createserver(app).listen(app.get('port'), function(){
console.log('express server listening on port ' + app.get('port'));
});
|
修改index.ejs文件：
|
1
2
3
4
5
6
7
8
9
|
var app = angular.module('app', []);
app.controller('maincontroller', function($rootscope, $scope, $http) {
$http({
method: 'get',
url: '/api/findalluser'
}).then(function successcallback(r) {
$scope.rows = r.data;
});
});
|
完整的index.ejs文件如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<!doctype html>
<html>
<head>
<title>
<%= title %>
</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<script src="//cdn.bootcss.com/angular.js/1.5.6/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('app', []);
app.controller('maincontroller', function($rootscope, $scope, $http) {
$http({
method: 'get',
url: '/api/findalluser'
}).then(function successcallback(r) {
$scope.rows = r.data;
});
});
</script>
</head>
<body ng-app="app" ng-controller="maincontroller">
<h1><%= title %></h1>
<p>welcome to
<%= title %>
</p>
<br />
<table>
<tr ng-repeat="row in rows">
<td>{{row.id}}</td>
<td>{{row.name}}</td>
<td>{{row.age}}</td>
</tr>
</table>
</body>
</html>
|
运行效果如下：
总结
第二种通过反向代理的方式是最佳方案。在正式项目中，可以使用node.js控制web前端渲染与spring boot后端提供api服务的组合。这样，可以控制用户在node.js端登录后才能调用spring boot的api服务。在大型web项目中也可以使用node.js的反向代理，把很多子站点关联起来，这样便发挥出了网站灵活的扩展性。
以上所述是小编给大家介绍的spring boot ajax跨域的两种方式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对服务器之家网站的支持！
原文链接：http://www.cnblogs.com/GoodHelper/p/6824562.html