详解Spring Boot 2.0.2+Ajax解决跨域请求的问题
问题描述
后端域名为A.abc.com，前端域名为B.abc.com。浏览器在访问时，会出现跨域访问。浏览器对于javascript的同源策略的限制。
HTTP请求时，请求本身会返回200，但是返回结果不会走success，并且会在浏览器console中提示：
已拦截跨源请求：同源策略禁止读取位于 https://www.baidu.com/ 的远程资源。（原因：CORS 头缺少 ‘Access-Control-Allow-Origin'）。
解决方案
1.jsonp
2.引用A站的js
3.Nginx做A站的反向代理
4.后端服务放开跨域请求
其中，以最后两种见常。
详细方案
本文主要描述第四种解决方案：后端服务放开跨域请求。
spring boot中放开跨域请求很简单。
1.增加一个configuration类
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
/**
* 跨域访问配置
* @author wencst
* @creation 2017年8月18日
*/
@Configuration
public class CustomCORSConfiguration {
private CorsConfiguration buildConfig() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin("*");
corsConfiguration.addAllowedHeader("*");
corsConfiguration.addAllowedMethod("*");
return corsConfiguration;
}
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", buildConfig());
return new CorsFilter(source);
}
}
增加此类以后，非同源http访问可以正常进行了，但是会不会有什么问题呢？
对于大部分网站依然需要使用cookie作为前后端传输数据的媒介，然而默认非同源请求是不携带cookie信息的。
2.服务端允许跨域携带cookie信息
在spring boot2.0.2中，允许跨域设置比较简单，只需增加一个configuration类即可。
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
/**
* 跨域访问配置
* @author wencst
* @creation 2017年8月18日
*/
@Configuration
public class CustomCORSConfiguration {
private CorsConfiguration buildConfig() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin("*");
corsConfiguration.addAllowedHeader("*");
corsConfiguration.addAllowedMethod("*");
corsConfiguration.addExposedHeader("Content-Type");
corsConfiguration.addExposedHeader( "X-Requested-With");
corsConfiguration.addExposedHeader("accept");
corsConfiguration.addExposedHeader("Origin");
corsConfiguration.addExposedHeader( "Access-Control-Request-Method");
corsConfiguration.addExposedHeader("Access-Control-Request-Headers");
corsConfiguration.setAllowCredentials(true);
return corsConfiguration;
}
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", buildConfig());
return new CorsFilter(source);
}
}
增加信息后，在前端依然需要调整AJAX请求，才能在非同源请求中携带cookie信息。
3.前端调整
$.ajax({
url: 'http://beta.roboming.com/api.php?s=/Public/AdminLogin.html',
type: 'POST',
async:true,
xhrFields:{
withCredentials:true
},
data: {
username:userName,
password:pwd
},
success: function(respon){
console.log(respon);
var res=eval(respon);
},
error: function(){
alert('服务器发生错误！');
}
});
此时，当前端向后端服务做跨域请求时，增加
xhrFields:{
withCredentials:true
},
就会带上cookie信息了，同理会带上token/sessionID等等内容。
测试方法
spring boot中增加一个controller
@Controller
public class LoginController {
@RequestMapping(value = "setString")
@ResponseBody
public String setString(HttpServletRequest request, HttpServletResponse response，@RequestParam String value) {
request.getSession().setAttribute("username", value);
return "OK";
}
@RequestMapping(value = "getString")
@ResponseBody
public String getString(HttpServletRequest request, HttpServletResponse response) {
String username = (String)request.getSession().getAttribute("username");
return username;
}
}
增加一个index.html，来访问跨域访问。
<html>
<head>
<meta charset="utf-8">
<title>跨域请求</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<button onclick="set()">set</button>
<br><br>
<button onclick="get()">get</button>
<script>
function set(){
$.ajax({
url:'http://wencst.vicp.net/setString?value=10',
xhrFields:{
withCredentials:true
},
success:function(result){
alert(result);
}
});
}
function get(){
$.ajax({
url:'http://wencst.vicp.net/getString',
xhrFields:{
withCredentials:true
},
success:function(result){
alert(result);
}
});
}
</script>
</body>
</html>
html文件可以单独本地访问即可出现效果，并不一定要形成服务访问。
当服务端不允许跨域访问时，html文件访问均报错，并调用失败。
当服务端允许跨域访问时，html请求访问成功。
当服务端开启cookie传递，并在html文件中增加 xhrFields参数时，session生效。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
jquery+ajaxform+springboot控件实现数据更新功能
应用背景 使用springboot架构在如下图所示的界面布局中,实现数据的保存或者更新,务必需要提交到后台,如何进行成功或失败的提示呢?如果使用传统的springmvc的模式,势必要传一个页面给前端,这个页面仅仅是提示操作是否成功了!提示之后还得更新一下数据,就好比我们浏览某些网站的时候给出的一些提示 操作成功,5秒后返回 . 比较傻,客户体验也比较差劲. 改造历程 使用ajax能否解决上述的问题呢? 答案是肯定的,点击保存之后,一个ajax请求到后台,使用ResponseBody标签,限制返回
-
SpringBoot解决ajax跨域问题的方法
SpringBoot解决ajax跨域,供大家参考,具体内容如下 一.第一种方式 1.编写一个支持跨域请求的 Configuration import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.anno
-
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 2.0.2+Ajax解决跨域请求的问题
问题描述 后端域名为A.abc.com,前端域名为B.abc.com.浏览器在访问时,会出现跨域访问.浏览器对于javascript的同源策略的限制. HTTP请求时,请求本身会返回200,但是返回结果不会走success,并且会在浏览器console中提示: 已拦截跨源请求:同源策略禁止读取位于 https://www.baidu.com/ 的远程资源.(原因:CORS 头缺少 'Access-Control-Allow-Origin'). 解决方案 1.jsonp 2.引用A站的js 3.N
-
Spring Boot 2.X优雅的解决跨域问题
一.什么是源和跨域 源(origin)就是协议.域名和端口号. URL由协议.域名.端口和路径组成,如果两个URL的协议.域名和端口全部相同,则表示他们同源.否则,只要协议.域名.端口有任何一个不同,就是跨域. 对https://www.baidu.com/index.html进行跨域比较: URL 是否跨域 原因 https://www.baidu.com/more/index.html 不跨域 三要素相同 https://map.baidu.com/ 跨域 域名不同 http://www.b
-
详解vue-cli项目开发/生产环境代理实现跨域请求
开发环境中跨域 使用vue-cli创建的项目,开发地址是localhost:8080,需要访问非本机上的接口http://192.168.0.112:8080/cms/queryMaterial.不同域名之间的访问,需要跨域才能正确请求.跨域的方法很多,通常都需要后台配置,不过vue-cli创建的项目,可以直接利用node.js代理服务器,通过修改vue proxyTable接口实现跨域请求.在vue-cli项目中的config文件夹下的index.js配置文件中,修改前的dev: dev: {
-
详解spring boot starter redis配置文件
spring-boot-starter-Redis主要是通过配置RedisConnectionFactory中的相关参数去实现连接redis service. RedisConnectionFactory是一个接口,有如下4个具体的实现类,我们通常使用的是JedisConnectionFactory. 在spring boot的配置文件中redis的基本配置如下: # Redis服务器地址 spring.redis.host=192.168.0.58 # Redis服务器连接端口 spring.
-
实例详解Spring Boot实战之Redis缓存登录验证码
本章简单介绍redis的配置及使用方法,本文示例代码在前面代码的基础上进行修改添加,实现了使用redis进行缓存验证码,以及校验验证码的过程. 1.添加依赖库(添加redis库,以及第三方的验证码库) <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-redis</artifactId> </dependency&
-
详解Spring Boot中使用Flyway来管理数据库版本
如果没有读过上面内容的读者,有兴趣的可以一阅.在上面的使用JdbcTemplate一文中,主要通过spring提供的JdbcTemplate实现对用户表的增删改查操作.在实现这个例子的时候,我们事先在MySQL中创建了用户表.创建表的过程我们在实际开发系统的时候会经常使用,但是一直有一个问题存在,由于一个系统的程序版本通过git得到了很好的版本控制,而数据库结构并没有,即使我们通过Git进行了语句的版本化,那么在各个环境的数据库中如何做好版本管理呢?下面我们就通过本文来学习一下在Spring B
-
详解spring boot rest例子
简介:本文将帮助您使用 Spring Boot 创建简单的 REST 服务. 你将学习 什么是 REST 服务? 如何使用 Spring Initializr 引导创建 Rest 服务应用程序? 如何创建获取 REST 服务以检索学生注册的课程? 如何为学生注册课程创建 Post REST 服务? 如何利用 postman 执行 rest 服务? 本教程使用的 rest 服务 在本教程中,我们将使用适当的 URI 和 HTTP 方法创建三个服务: @GetMapping("/ students
-
详解Spring Boot使用系统参数表提升系统的灵活性
目录 一.使用系统参数表的好处 二.系统参数表的表结构 三.系统参数表在项目中的使用 3.1.Entity类 3.2.Dao类 3.3.Service类 3.4.ServiceImpl类 3.5.全局配置服务类 3.6.启动时加载 3.7.在服务实现类中访问系统参数 一.使用系统参数表的好处 以数据库表形式存储的系统参数表比配置文件(.properties文件或.yaml文件)要更灵活,因为无需重启系统就可以动态更新. 系统参数表可用于存储下列数据: 表字段枚举值,如下列字段: `ques
-
详解Spring Boot 访问Redis的三种方式
目录 前言 开始准备 RedisTemplate JPA Repository Cache 总结 前言 最近在极客时间上面学习丁雪丰老师的<玩转 Spring 全家桶>,其中讲到访问Redis的方式,我专门把他们抽出来,在一起对比下,体验一下三种方式开发上面的不同, 分别是这三种方式 RedisTemplate JPA Repository Cache 开始准备 开始之前我们需要有Redis安装,我们采用本机Docker运行Redis, 主要命令如下 docker pull redis doc
-
详解Spring boot Admin 使用eureka监控服务
前言 最近刚好有空,来学习一下如何搭建spring boot admin环境.其中遇到很多的坑. 网上大多都是使用admin-url的方式直接来监控的,感觉一点也不灵活,这不是我想要的结果,所以本篇介绍借助eureka服务注册和发现功能来灵活监控程序. 本文主要记录spring boot admin的搭建过程,希望能有所帮助.其实非常的简单,不要被使用常规方式的误导! 环境介绍 IDE:intellij idea jdk: java8 maven:3.3.9 spring boot:1.5.6