spring boot ajax跨域的两种方式

2024-04-10 03:24:39

前言

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

一、准备工作

pom.xml：

<?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

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

package com.example;
public class User {
 public int id;
 public String name;
 public int age;
}

MainController.java：

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文件代码如下：

<!DOCTYPE html>
<html>
 <head>
 <title>
  <%= title %>
 </title>
 <link rel='stylesheet' href='/stylesheets/style.css' />
 <script src="https://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注解：

/**
 *
 *
 */
@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，来实现全局跨域：

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文件，使其支持反向代理：

var proxy = require('express-http-proxy');
var apiProxy = proxy('http://localhost:8080', {});
app.use('/api', apiProxy);

以“/api”开头的请求转发为spring boot的API服务。

完整代码如下：

/**
 * 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文件：

 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文件如下：

<!DOCTYPE html>
<html>
  <head>
    <title>
      <%= title %>
    </title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script src="https://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跨域的两种方式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

Spring Boot(五)之跨域、自定义查询及分页

跨域前面我们初步做出了一个可以实现受保护的 REST API,但是我们没有涉及一个前端领域很重要的问题,那就是跨域请求( cross-origin HTTP request ).先来回顾一些背景知识: 跨域请求定义:当我们从本身站点请求不同域名或端口的服务所提供的资源时,就会发起跨域请求. 例如最常见的我们很多的 css 样式文件是会链接到某个公共 CDN 服务器上,而不是在本身的服务器上,这其实就是典型的一个跨域请求.但浏览器由于安全原因限制了在脚本( script )中发起的跨域 HTT
详解SpringBoot多跨域请求的支持（JSONP）

在我们做项目的过程中,有可能会遇到跨域请求,所以需要我们自己组装支持跨域请求的JSONP数据,而在4.1版本以后的SpringMVC中,为我们提供了一个AbstractJsonpResponseBodyAdvice的类用来支持jsonp的数据(SpringBoot接收解析web请求是依赖于SpringMVC实现的).下面我们就看一下怎么用AbstractJsonpResponseBodyAdvice来支持跨域请求. 使用AbstractJsonpResponseBodyAdvice来支持跨域请求
Spring Boot实现跨域访问实现代码

当前使用spring版本是4.3.9 import org.springframework.stereotype.Component; import javax.servlet.*; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; @Component public class CorsFilter im
spring boot配合前端实现跨域请求访问

一.方法: 服务端设置Respone Header头中Access-Control-Allow-Origin 配合前台使用jsonp 继承WebMvcConfigurerAdapter 添加配置类二.实例: 1.前端:因为我们用了前后端分离,前端用node服务器,node服务器再用了ajax反向代理请求到我的spring boot 服务器.其中node服务器也用了ajax发出请求所以也存在跨域的问题.具体代码: app.all(apiRoot + '/*', proxy('127.0.0.1:
浅谈spring-boot 允许接口跨域并实现拦截（CORS）

本文介绍了spring-boot 允许接口跨域并实现拦截(CORS),分享给大家,也给自己留个笔记 pom.xml(依赖的jar) // 在spring-boot-starter-web的启动器中,已经依赖好了 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependen
Spring Boot Web应用开发 CORS 跨域请求支持

一.Web开发经常会遇到跨域问题,解决方案有:jsonp,iframe,CORS等等 CORS与JSONP相比 1. JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求. 2. 使用CORS,开发者可以使用普通的XMLHttpRequest发起请求和获得数据,比起JSONP有更好的错误处理. 3. JSONP主要被老的浏览器支持,它们往往不支持CORS,而绝大多数现代浏览器都已经支持了CORS 浏览器支持情况 Chrome 3+ Firefox 3.5+ Opera 12+ Sa
spring boot ajax跨域的两种方式

前言 java语言在多数时,会作为一个后端语言,为前端的php,node.js等提供API接口.前端通过ajax请求去调用java的API服务.今天以node.js为例,介绍两种跨域方式:CrossOrigin和反向代理. 一.准备工作 pom.xml: <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0&quo
详解Spring Boot 中实现定时任务的两种方式

在 Spring + SpringMVC 环境中,一般来说,要实现定时任务,我们有两中方案,一种是使用 Spring 自带的定时任务处理器 @Scheduled 注解,另一种就是使用第三方框架 Quartz ,Spring Boot 源自 Spring+SpringMVC ,因此天然具备这两个 Spring 中的定时任务实现策略,当然也支持 Quartz,本文我们就来看下 Spring Boot 中两种定时任务的实现方式. @Scheduled 使用 @Scheduled 非常容易,直接创建一个
Spring boot调用Oracle存储过程的两种方式及完整代码

前言因工作需要将公司SSH项目改为Spingboot项目,将项目中部分需要调用存储过程的部分用entityManagerFactory.unwrap(SessionFactory.class).openSession()来获取Session实现后发现项目访问数据库超过十次就会挂掉,原因是Springboot连接池数量默认为10,猜测是每次访问数据库后连接未释放导致的,手动关闭session后问题解决. 解决问题的过程中又发现了另外两种调用方式: 直接用EntityManager的createS
Spring Boot中防止递归查询的两种方式

本文主要给大家介绍了关于Spring Boot防止递归查询的相关内容,这只是一个小提醒,这里有两种方式,很简单,下面来看看详细的介绍: 1.在application.properties中配置 #懒加载配置 spring.jpa.properties.hibernate.enable_lazy_load_no_trans=true 2.在entity中添加注解在关联对象上添加@JsonBackReference 在类上添加@JsonIgnoreProperties("roles")
SpringBoot实现全局和局部跨域的两种方式

前言在如今前后端分离的开发模式下,跨域是一个非常经典的问题,解决的方式也有很多,比如代理服务器,使用JSONP 我之前也写过一篇解决跨域问题的文章,感兴趣的可以参考:解决Vue前后端跨域问题的多种方式上面两种解决跨域的办法都是在前端角度的,这次站在后端角度,从全局和局部两个方面解决跨域问题什么是跨域所谓的跨域请求就是指:当前发起请求的域与该请求指向的资源所在的域不一样.这里的域指的是这样的一个概念:我们认为若协议 + 域名 + 端口号均相同,那么就是同域. 解决跨域后端解决跨域,主要借
Spring boot实现热部署的两种方式详解

热部署是什么大家都知道在项目开发过程中,常常会改动页面数据或者修改数据结构,为了显示改动效果,往往需要重启应用查看改变效果,其实就是重新编译生成了新的 Class 文件,这个文件里记录着和代码等对应的各种信息,然后 Class 文件将被虚拟机的 ClassLoader 加载. 而热部署正是利用了这个特点,它监听到如果有 Class 文件改动了,就会创建一个新的 ClaassLoader 进行加载该文件,经过一系列的过程,最终将结果呈现在我们眼前. 类加载机制 Java 中的类经过编译器可以把代
Spring Boot 中密码加密的两种方法

先说一句:密码是无法解密的.大家也不要再问松哥微人事项目中的密码怎么解密了! 密码无法解密,还是为了确保系统安全.今天松哥就来和大家聊一聊,密码要如何处理,才能在最大程度上确保我们的系统安全. 1.为什么要加密 2011 年 12 月 21 日,有人在网络上公开了一个包含 600 万个 CSDN 用户资料的数据库,数据全部为明文储存,包含用户名.密码以及注册邮箱.事件发生后 CSDN 在微博.官方网站等渠道发出了声明,解释说此数据库系 2009 年备份所用,因不明原因泄露,已经向警方报案,后又在
解决SpringBoot跨域的三种方式

一.什么是跨域 1.1.为什么会出现跨域问题出于浏览器的同源策略限制.同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现.同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互.所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port) 简单说A应用只能访问
SpringBoot 中实现跨域的5种方式小结

一.为什么会出现跨域问题出于浏览器的同源策略限制.同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现. 同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互.所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port) 二.什么是跨域当一个请求url的协议

spring boot ajax跨域的两种方式

相关推荐

随机推荐