什么是跨域
首先,我们需要了解一下一个URL是怎么组成的:
// 协议 + 域名(子域名 + 主域名) + 端口号 + 资源地址
http: + // + www.baidu.com + :8080/
只要协议,子域名,主域名,端口号这四项组成部分中有一项不同,就可以认为是不同的域,不同的域之间互相访问资源,就被称之为跨域。
随着前后端分离开发的越来越普及,会经常遇到跨域的问题,当我们在浏览器中看到这样的错误时,就需要意识到遇到了跨域:
解决跨域的几种方案首先,我们使用vue-cli来快速构建一个前端项目,然后使用axios来向后台发送ajax请求。然后在控制台中打印出返回信息。这里就不再多做赘述,后面我会多带带写一篇文章来讲一下如何使用vue-cli快速创建一个vue项目。
这里不再讲解使用jsonp的方式来解决跨域,因为jsonp方式只能通过get请求方式来传递参数,而且有一些不便之处。
下面的几种方式都是通过跨域访问技术CORS(Cross-Origin Resource Sharing)来解决的。具体的实现原理我们不做深入的探究,这节课的目的是解决跨域问题~
方法一:注解在Spring Boot 中给我们提供了一个注解@CrossOrigin来实现跨域,这个注解可以实现方法级别的细粒度的跨域控制。我们可以在类或者方添加该注解,如果在类上添加该注解,该类下的所有接口都可以通过跨域访问,如果在方法上添加注解,那么仅仅只限于加注解的方法可以访问。
@RestController @RequestMapping("/user") @CrossOrigin public class UserController { @Autowired private UserService userService; @RequestMapping("/findAll") public Object findAll(){ return userService.list(); } }
现在再去测试一下:
Bingo,成功!
方法二:实现WebMvcConfigurer这里可以通过实现WebMvcConfigurer接口中的addCorsMappings()方法来实现跨域。
@Configuration class CORSConfiguration implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**"); } }
下面我们将刚刚加上的注解给注释掉,看看能不能访问到这个接口:
不出我们所料,果然还是可以的~
方法三:Filter我们可以通过实现Fiter接口在请求中添加一些Header来解决跨域的问题:
@Component public class CORSFilter implements Filter { @Override public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { HttpServletResponse res = (HttpServletResponse) response; res.addHeader("Access-Control-Allow-Credentials", "true"); res.addHeader("Access-Control-Allow-Origin", "*"); res.addHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT"); res.addHeader("Access-Control-Allow-Headers", "Content-Type,X-CAF-Authorization-Token,sessionToken,X-TOKEN"); if (((HttpServletRequest) request).getMethod().equals("OPTIONS")) { response.getWriter().println("ok"); return; } chain.doFilter(request, response); } @Override public void destroy() { } @Override public void init(FilterConfig filterConfig) throws ServletException { } }
不出意外的话,应该也可以在控制台获取到返回信息。
Nginx配置解决跨域问题如果我们在项目中使用了Nginx,可以在Nginx中添加以下的配置来解决跨域(原理其实和Filter类似,只不过把活儿丢给了运维
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/75742.html
摘要:栈长得到消息,停止开发了。。。是一个轻量级的容错组件,其灵感来自于,主要为和函数式编程设计的看到这里,栈长表示学不动了。。。上面说了,官方推荐替代的开源组件,这个栈长也没有用过,查了下,资料也比较稀少。 showImg(https://segmentfault.com/img/remote/1460000017201104?w=1600&h=1066); 栈长得到消息,Hystrix ...
摘要:其简陋的页面让人不忍直视,但更新到系列后,像脱胎换骨一般好用这篇博客记录我个人在使用过程中遇到过的坑,每个坑位都会附上详细的填坑办法环境参数服务直接注册失败常见的注册失败问题可以分为以下两种服务端与客户端不在同一台服务器上提示安全校验不通过 Spring Boot Admin 1.x其简陋的页面让人不忍直视,但更新到2.x系列后,像脱胎换骨一般好用 这篇博客记录我个人在使用Spring...
摘要:由于本人更习惯使用所以后续案例都是基于与,同时这里是基于最新的编写的哦创建项目初次接触,我们先来看看如何创建一个项目,这里以为例,其他的工具小伙伴们自行搜索创建方式。创建完项目后,各位小伙伴请认真细心的对比下与传统的工程有何区别如目录结构。 SpringBoot 是为了简化 Spring 应用的创建、运行、调试、部署等一系列问题而诞生的产物,自动装配的特性让我们可以更好的关注业务本身...
摘要:前两天组里的大佬心血来潮,让我这周把项目里的版本升级到最新版本,目前项目用到的是版本为的版本为现在按照要求统一升级到。三数据库连接池同样也是版本不兼容,需要升级到,亲测有效。差不多这些,后续遇到其他问题还会继续补充。 前两天组里的大佬心血来潮,让我这周把项目里的spring-boot、spring-cloud版本升级到最新版本,目前项目用到的是spring-boot版本为1.5.9.R...
摘要:引入了新的环境和概要信息,是一种更揭秘与实战六消息队列篇掘金本文,讲解如何集成,实现消息队列。博客地址揭秘与实战二数据缓存篇掘金本文,讲解如何集成,实现缓存。 Spring Boot 揭秘与实战(九) 应用监控篇 - HTTP 健康监控 - 掘金Health 信息是从 ApplicationContext 中所有的 HealthIndicator 的 Bean 中收集的, Spring...
阅读 1806·2021-09-14 18:03
阅读 2249·2019-08-30 15:48
阅读 1102·2019-08-30 14:09
阅读 468·2019-08-30 12:55
阅读 2704·2019-08-29 11:29
阅读 1469·2019-08-26 13:43
阅读 2290·2019-08-26 13:30
阅读 2346·2019-08-26 12:17