个人中心
gpt4 book ai didi

spring boot ajax跨域的两种方式

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 25 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章spring boot ajax跨域的两种方式由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

前言 。

 java语言在多数时，会作为一个后端语言，为前端的php,node.js等提供api接口。前端通过ajax请求去调用java的api服务。今天以node.js为例，介绍两种跨域方式：crossorigin和反向代理.

 1、准备工作 。

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请求时跨域失败.

2、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跨域的两种方式

3、通过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 。

最后此篇关于spring boot ajax跨域的两种方式的文章就讲到这里了,如果你想了解更多关于spring boot ajax跨域的两种方式的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

25 4 0
文章推荐： java实现上传和下载工具类
文章推荐： python实现协同过滤推荐算法完整代码示例
文章推荐： Java LocalCache 本地缓存的实现实例
文章推荐： python3大文件解压和基本操作
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com