SpringBoot学习笔记(7)-----CORS支持解决跨域问题
在实际应用开发中，跨域是一个比较常见的问题，解决方法可以用jsonp，frame,cors等，
这里示例的是SpringBoot对CORS的支持的三种实现方式
第一种：配置一种全局的支持，这种方式需要新增一个配置类如下：
package com.wangx.boot.config; import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration
public class CORSConfiguration { @Bean
public WebMvcConfigurer webMvcConfigurer () {
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
//允许所有/api/路径下的访问跨域，允许http://localhost:8080的源跨域
registry.addMapping("/api/**").allowedOrigins("http://localhost:8080");
}
};
}
}
这样在别的服务中想要访问该服务的api路径下的所有资源都会被允许跨域请求，本示例在8080端口的服务下请求8082的服务的资源，请求页面代码如下：
<body>
<div onclick="getLabelsGet()">这是一个事件</div>
<p id = "data"></p>
</body>
<script type="text/javascript">
/* 创建 XMLHttpRequest 对象 */
var xmlHttp;
function GetXmlHttpObject(){
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
// -----------ajax方法-----------//
function getLabelsGet(){
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null){
alert('您的浏览器不支持AJAX！');
return;
}
var url="http://localhost:8082/api/say?name=jack";
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange=getOkGet;//发送事件后，收到信息了调用函数
xmlHttp.send();
}
function getOkGet(){
if(xmlHttp.readyState==1||xmlHttp.readyState==2||xmlHttp.readyState==3){
// 本地提示：加载中
}
if (xmlHttp.readyState==4 && xmlHttp.status==200){
var d= xmlHttp.responseText;
// 处理返回结果
var data = document.getElementById("data");
data.innerHTML = d;
console.log(d);
}
}
</script>
当点击”这是一个事件“后，访问结果如下：
这样就实现了从一个服务器页面访问另一个服务器之间允许跨域的问题。除了注册一个Bean之外，也可以使用配置类实现WebMvcConfigurer接口来实现跨域，原理一样，都是通过重写addCorsMappings方法来实现跨域的，实现接口的代码如下：
package com.wangx.boot.config; import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration
public class CORSConfiguration implements WebMvcConfigurer { @Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/api/**").allowedOrigins("http://localhost:8080");
}
}
第二种：使用@CrossOrigin注解来实现跨域问题，这是最简单的也是可以控制粒度的一种方式，使用注解作用在方法上。则只用该方法允许跨域访问，作用在类上就只有该类中的所有接口允许访问，具体代码如下：
@CrossOrigin注解作用到方法上：
package com.wangx.boot.controller; import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
@RequestMapping("/api")
public class ApiController { @CrossOrigin(origins = {"http://localhost:8080", "null"})
@RequestMapping("/say")
public String say(String name) {
System.out.println(name);
return "name:" + name + "hello";
}
@RequestMapping("/to")
public String to(String name) {
System.out.println(name);
return "name:" + name + "hello";
}
}
当在其他服务器页面上访问方法say()时，成功返回数据，访问to时报跨域错误。
@CrossOrigin作用到类上：
package com.wangx.boot.controller; import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
@RequestMapping("/api")
@CrossOrigin(origins = {"http://localhost:8080", "null"})
public class ApiController {
@RequestMapping("/say")
public String say(String name) {
System.out.println(name);
return "name:" + name + "hello";
}
@RequestMapping("/to")
public String to(String name) {
System.out.println(name);
return "name:" + name + "hello";
}
}
作用到类上时，类中的所有接口均能够被访问别成功返回数据。运行结果与方式一相同
SpringBoot学习笔记(7)-----CORS支持解决跨域问题的更多相关文章
- springboot中通过cors协议解决跨域问题
1.对于前后端分离的项目来说,如果前端项目与后端项目部署在两个不同的域下,那么势必会引起跨域问题的出现. 针对跨域问题,我们可能第一个想到的解决方案就是jsonp,并且以前处理跨域问题我基本也是这么处 ...
- AJAX学习笔记2：XHR实现跨域资源共享（CORS）以及和JSONP的对比----转载
1 前言: 首先对参考文章作者表示感谢,你们的经验总结给我们这些新手提供了太多资源.本文致力于解决AJAX的CORS问题,我在逻辑上进行了梳理:首先,系统的总结了CORS问题的起源-同源策略:其次,介 ...
- SpringBoot入门教程(十三)CORS方式实现跨域
什么是跨域?浏览器从一个域名的网页去请求另一个域名的资源时,域名.端口.协议任一不同,都是跨域 . 跨域资源访问是经常会遇到的场景,当一个资源从与该资源本身所在的服务器不同的域或端口请求一个资源时,资 ...
- springboot WebMvcConfigurer配置静态资源和解决跨域
前言 虽然现在都流行前后端分离部署,但有时候还是需要把前端文件跟后端文件一起打包发布,这就涉及到了springboot的静态资源访问的问题.不单只是静态资源打包,比如使用本地某个目录作为文件存储,也可 ...
- CORS,jsonp解决跨域问题
同源和跨域 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上 ...
- 学习ASP.NET Core(11)-解决跨域问题与程序部署
上一篇我们介绍了系统日志与测试相关的内容并添加了相关的功能:本章我们将介绍跨域与程序部署相关的内容 一.跨域 1.跨域的概念 1.什么是跨域? 一个请求的URL由协议,域名,端口号组成,以百度的htt ...
- JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...
- Spring MVC配置CORS（解决跨域请求）
1. CORS 简介 同源策略(same origin policy)是浏览器安全的基石.在同源策略的限制下,非同源的网站之间不能发送 ajax 请求的. 为了解决这个问题,w3c 提出了跨源资源共享 ...
- springboot(十八)：CORS方式实现跨域
资料 https://www.cnblogs.com/toutou/p/9843588.html
随机推荐
- 02操控奴隶——掌握它的语言“Python”
一 编程常识 1编程语言的发展史 程序员是计算机的主人,主人与奴隶沟通的介质是编程语言,编程语言从诞生到现在它经历了那几个阶段呢? 2 语言的特性: 3 初期的编程语言更多的是站在计算机的角度去设计编 ...
- CentOS 7 安装配置MySQL
环境 CentOS Linux release 7.5.1804 (Core) MySQL:mysql80-community-release-el7-1 检查: 在centos7中默认的是maria ...
- oracle中nvl函数用法
1.返回两个字段中非空字段的值,第一个字段非空,返回第一个字段的值,第二个字段值为null,则返回第二个字段的值,如果都为null 则返回null. select nvl(a,b) from tabl ...
- POJ 1988 Cube Stacking（ 带权并查集 ）*
POJ 1988 Cube Stacking( 带权并查集 ) 非常棒的一道题!借鉴"找回失去的"博客 链接:传送门 题意: P次查询,每次查询有两种: M x y 将包含x的集合 ...
- NOI 2018 归程 (Kruskal重构树)
题目大意:太长了,略 Kruskal重构树,很神奇的一个算法吧 如果两个并查集被某种条件合并,那么这个条件作为一个新的节点连接两个并查集 那么在接下来的提问中,如果某个点合法,它的所有子节点也都合法, ...
- Ajax原理-重点
Ajax原理 AJAX即“Asynchronous Javascript And XML”,是指一种创建交互式网页应用的网页开发技术.AJAX 是一种用于创建快速动态网页的技术.它可以令开发者只向服务 ...
- MySQL主从复制与读写分离(非原创，谢绝膜拜)
MySQL主从复制(Master-Slave)与读写分离(MySQL-Proxy)实践 Mysql作为目前世界上使用最广泛的免费数据库,相信所有从事系统运维的工程师都一定接触过.但在实际的生产环境中, ...
- HDU 2686 Matrix(最大费用最大流+拆点)
题目链接:pid=2686">http://acm.hdu.edu.cn/showproblem.php?pid=2686 和POJ3422一样 删掉K把汇点与源点的容量改为2(由于有 ...
- 为什么选性别会导致兴趣都选中-vue
为什么选性别会导致兴趣都选中-vue <%@ page language="java" import="java.util.*" pageEncoding ...
- Webstorm快捷键整理
Webstorm快捷键整理 F2/Shift F2 下一个/上一个高亮错误 Ctrl+Shift+BackSpace 回到刚刚编辑的地方 Alt+Insert 新建文件,还有其他功能 Ctrl+D ...