服务器之家

服务器之家 > 正文

spring boot ajax跨域的两种方式

时间:2020-09-27 15:37     来源/作者:刘冬

前言

 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;
 }
}

项目结构如下图所示:

spring boot ajax跨域的两种方式

访问http://localhost:8080/findalluser

spring boot ajax跨域的两种方式

使用hbuilder创建node.js express项目:

spring boot ajax跨域的两种方式

选择ejs模板引擎:

spring boot ajax跨域的两种方式

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请求

右键运行项目:

spring boot ajax跨域的两种方式

运行效果:

spring boot ajax跨域的两种方式

发现调用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,效果如下:

spring boot ajax跨域的两种方式

三、通过node.js的方向代理实现跨域

node.js提供了一些反向代理的中间件,能轻而易举的实现跨域,而不需要spring boot做任何设置。

安装express-http-proxy中间件

npm install --save-dev express-http-proxy

spring boot ajax跨域的两种方式

修改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>

运行效果如下:

spring boot ajax跨域的两种方式

总结

  第二种通过反向代理的方式是最佳方案。在正式项目中,可以使用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

标签:

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
Intellij idea2020永久破解,亲测可用!!!
Intellij idea2020永久破解,亲测可用!!! 2020-07-29
歪歪漫画vip账号共享2020_yy漫画免费账号密码共享
歪歪漫画vip账号共享2020_yy漫画免费账号密码共享 2020-04-07
电视剧《琉璃》全集在线观看 琉璃美人煞1-59集免费观看地址
电视剧《琉璃》全集在线观看 琉璃美人煞1-59集免费观看地址 2020-08-12
最新idea2020注册码永久激活(激活到2100年)
最新idea2020注册码永久激活(激活到2100年) 2020-07-29
返回顶部