在实际应用开发中,跨域是一个比较常见的问题,解决方法可以用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支持解决跨域问题的更多相关文章

  1. springboot中通过cors协议解决跨域问题

    1.对于前后端分离的项目来说,如果前端项目与后端项目部署在两个不同的域下,那么势必会引起跨域问题的出现. 针对跨域问题,我们可能第一个想到的解决方案就是jsonp,并且以前处理跨域问题我基本也是这么处 ...

  2. AJAX学习笔记2:XHR实现跨域资源共享(CORS)以及和JSONP的对比----转载

    1 前言: 首先对参考文章作者表示感谢,你们的经验总结给我们这些新手提供了太多资源.本文致力于解决AJAX的CORS问题,我在逻辑上进行了梳理:首先,系统的总结了CORS问题的起源-同源策略:其次,介 ...

  3. SpringBoot入门教程(十三)CORS方式实现跨域

    什么是跨域?浏览器从一个域名的网页去请求另一个域名的资源时,域名.端口.协议任一不同,都是跨域 . 跨域资源访问是经常会遇到的场景,当一个资源从与该资源本身所在的服务器不同的域或端口请求一个资源时,资 ...

  4. springboot WebMvcConfigurer配置静态资源和解决跨域

    前言 虽然现在都流行前后端分离部署,但有时候还是需要把前端文件跟后端文件一起打包发布,这就涉及到了springboot的静态资源访问的问题.不单只是静态资源打包,比如使用本地某个目录作为文件存储,也可 ...

  5. CORS,jsonp解决跨域问题

    同源和跨域 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上 ...

  6. 学习ASP.NET Core(11)-解决跨域问题与程序部署

    上一篇我们介绍了系统日志与测试相关的内容并添加了相关的功能:本章我们将介绍跨域与程序部署相关的内容 一.跨域 1.跨域的概念 1.什么是跨域? 一个请求的URL由协议,域名,端口号组成,以百度的htt ...

  7. JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  8. Spring MVC配置CORS(解决跨域请求)

    1. CORS 简介 同源策略(same origin policy)是浏览器安全的基石.在同源策略的限制下,非同源的网站之间不能发送 ajax 请求的. 为了解决这个问题,w3c 提出了跨源资源共享 ...

  9. springboot(十八):CORS方式实现跨域

    资料 https://www.cnblogs.com/toutou/p/9843588.html

随机推荐

  1. javascript中常用数组方法详细讲解

    javascript中数组常用方法总结 1.join()方法: Array.join()方法将数组中所以元素都转化为字符串链接在一起,返回最后生成的字符串.也可以指定可选的字符串在生成的字符串中来分隔 ...

  2. Unity 引用的玩家不受控制

    原因是因为从Project拖过去的, 应该从Hierarchy拖过去.

  3. 如何在ZBrush 4R7中设置背面遮罩

    ZBrush 4R7中的背面遮罩是如何来设置的?当我们在进行ZBrush雕刻创作的时候,经常会不经意的雕刻到背面的物体,那么,如何防止背面的物体不被雕刻到,这就需要设置下背景遮罩了. ZBrush 4 ...

  4. java中内存溢出和内存泄漏的区别

    虽然在java中我们不用关心内存的释放, 垃圾回收机制帮助我们回收不需要的对象,但实际上不正当的操作也会产生内存问题:如,内存溢出.内存泄漏 内存溢出:out of memory:简单通俗理解就是内存 ...

  5. HDU 2604 Queuing( 递推关系 + 矩阵快速幂 )

    链接:传送门 题意:一个队列是由字母 f 和 m 组成的,队列长度为 L,那么这个队列的排列数为 2^L 现在定义一个E-queue,即队列排列中是不含有 fmf or fff ,然后问长度为L的E- ...

  6. [读书笔记] R语言实战 (五) 高级数据管理

    1. 数值函数 1) 数学函数 2) 统计函数 3. 数据标准化 scale() 函数对矩阵或者数据框的指定列进行均值为0,标准化为1的标准化 mydata <- data.frame(c1=c ...

  7. Matplotlib 绘图与可视化 一些属性和错误

    属性 *)调整图像边缘及图像间的空白间隔plt.subplots.adjust(6个参数) 图像外部边缘的调整可以使用plt.tight_layout()进行自动控制,此方法不能够很好的控制图像间的间 ...

  8. python--(爬虫-re模块)

    python--(爬虫-re模块) re模块四大核心功能: 1.findall 查找所有,返回list import re lst = re.findall("m", " ...

  9. 【codeforces 746E】Numbers Exchange

    [题目链接]:http://codeforces.com/problemset/problem/746/E [题意] 你有n张卡片,上面写着不同的数字; 然后另外一个人有m张上面写着不同的数字的卡片: ...

  10. 洛谷——P3258 [JLOI2014]松鼠的新家

    https://www.luogu.org/problem/show?pid=3258 题目描述 松鼠的新家是一棵树,前几天刚刚装修了新家,新家有n个房间,并且有n-1根树枝连接,每个房间都可以相互到 ...