定义:跨域是指从一个域名的网页去请求另一个域名的资源
1.原由
公司内部有多个不同的子域,比如一个是location.company.com ,而应用是放在app.company.com , 这时想从 app.company.com去访问 location.company.com 的资源就属于跨域
本人是springboot菜鸟,但是做测试框架后端需要使用Springboot和前端对接,出现跨域问题,需要设置后端Response的Header.走了不少坑,在这总结一下以备以后使用
2.使用场景
浏览器默认不允许跨域访问,包括我们平时ajax也是限制跨域访问的。
产生跨域访问的情况主要是因为请求的发起者与请求的接受者1、域名不同;2、端口号不同
如果一个网页可以随意地访问另外一个网站的资源,那么就有可能在客户完全不知情的情况下出现安全问题
3.解决方案
通过设置Access-Control-Allow-Origin来实现跨域访问
4.具体解决
刚开始使用http://www.jianshu.com/p/f2060a6d6e3b设置,但是由于我们使用的spring版本的问题,CorsConfiguration类需要4.2.7版本。和我们使用的spring里面版本不一致,导致版本冲突或者各种问题
@Configuration public class CorsConfig { private CorsConfiguration buildConfig() { CorsConfiguration corsConfiguration = new CorsConfiguration(); corsConfiguration.addAllowedOrigin("*"); // 1 corsConfiguration.addAllowedHeader("*"); // 2 corsConfiguration.addAllowedMethod("*"); // 3 return corsConfiguration; } @Bean public CorsFilter corsFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration("/**", buildConfig()); // 4 return new CorsFilter(source); } }
后来改为Filter方式
@Component public class CorsFilter implements Filter { final static org.slf4j.Logger logger = org.slf4j.LoggerFactory.getLogger(CorsFilter.class); public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { HttpServletResponse response = (HttpServletResponse) res; HttpServletRequest reqs = (HttpServletRequest) req; response.setHeader("Access-Control-Allow-Origin","*"); response.setHeader("Access-Control-Allow-Credentials", "true"); response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE"); response.setHeader("Access-Control-Max-Age", "3600"); response.setHeader("Access-Control-Allow-Headers", "x-requested-with"); chain.doFilter(req, res); } public void init(FilterConfig filterConfig) {} public void destroy() {} }
后来改为Filter方式
@Component public class CorsFilter implements Filter { final static org.slf4j.Logger logger = org.slf4j.LoggerFactory.getLogger(CorsFilter.class); public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { HttpServletResponse response = (HttpServletResponse) res; HttpServletRequest reqs = (HttpServletRequest) req; response.setHeader("Access-Control-Allow-Origin","*"); response.setHeader("Access-Control-Allow-Credentials", "true"); response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE"); response.setHeader("Access-Control-Max-Age", "3600"); response.setHeader("Access-Control-Allow-Headers", "x-requested-with"); chain.doFilter(req, res); } public void init(FilterConfig filterConfig) {} public void destroy() {} }
网上很多资料都是教按以上方法设置,但是我这里就是设置不成功的。出现下面问题
<span style="color:#ff0000;">Fetch API cannot load https://atfcapi.alpha.elenet.me/atfcapi/project/mainPageList. The value of the 'Access-Control-Allow-Origin' </span>
<span style="color:#ff0000;">header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'https://atfcapi-test.faas.elenet.me' is therefore not allowed access.</span>
目前为止,不知道为什么这样配置不可以,然后改为设置单个域名,如下显示
response.setHeader("Access-Control-Allow-Origin", "https://atfcapi-test.faas.elenet.me");
这样设置就成功了,但是我们有好几个环境,同一套代码,写死一个域名并解决不了问题,
按照很多网络文章中所说,设置多个域名如下:
response.setHeader("Access-Control-Allow-Origin", "https://atfcapi-test.faas.elenet.me,https://atfcapi-test-beta.faas.elenet.me");
但是设置完以后,并不好用,出现如下错误信息:
<span style="color:#ff6666;">Fetch API cannot load https://atfcapi.alpha.elenet.me/atfcapi/project/getProjects. The 'Access-Control-Allow-Origin' header contains multiple values </span>
<span style="color:#ff6666;">'https://atfcapi-test.faas.elenet.me,https://atfcapi-test-beta.faas.elenet.me', but only one is allowed. Origin 'https://atfcapi-test.faas.elenet.me' is therefore not allowed access. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.</span>
设置为以下方式也还是错误:
response.setHeader("Access-Control-Allow-Origin", "https://atfcapi-test.faas.elenet.me"); response.setHeader("Access-Control-Allow-Origin", "https://atfcapi-test-beta.faas.elenet.me");
最后采用了一种和设置为* 的方式一样的办法,代码如下:
@Component public class CorsFilter implements Filter { final static org.slf4j.Logger logger = org.slf4j.LoggerFactory.getLogger(CorsFilter.class); public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { HttpServletResponse response = (HttpServletResponse) res; HttpServletRequest reqs = (HttpServletRequest) req; response.setHeader("Access-Control-Allow-Origin",reqs.getHeader("Origin")); response.setHeader("Access-Control-Allow-Credentials", "true"); response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE"); response.setHeader("Access-Control-Max-Age", "3600"); response.setHeader("Access-Control-Allow-Headers", "x-requested-with"); chain.doFilter(req, res); } public void init(FilterConfig filterConfig) {} public void destroy() {} }
从request 中的header中获取Origin,来做配置,最终成功并满足需求。
其实有些东西还是一知半解,但是起码曲线救国也是一种解决方法。
总结
以上就是本文关于Spring boot跨域设置实例详解的全部内容,希望对大家有所帮助。感兴趣的朋友可以继续参阅本站:
快速了解Spring Boot
SpringBoot集成多数据源解析
Maven管理SpringBoot Profile详解
如有不足之处,欢迎留言指出。感谢朋友们对本站的支持!
本文向大家介绍js实现跨域的方法实例详解,包括了js实现跨域的方法实例详解的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js实现跨域的方法。分享给大家供大家参考。具体分析如下: 由于同源策略的限制,XMLHttpRequest只允许请求当前源(包含域名、协议、端口)的资源。 json与jsonp的区别: JSON是一种数据交换格式,而JSONP是一种依靠开发人员创造出的一种非官方跨域数据
本文向大家介绍SpringBoot框架RESTful接口设置跨域允许,包括了SpringBoot框架RESTful接口设置跨域允许的使用技巧和注意事项,需要的朋友参考一下 跨域 跨域请求是指浏览器脚本文件在发送请求时,脚本所在的服务器和请求的服务器地址不一样。跨域是有浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制, 同源策略:是指协议、域名、端口都要相同,其中有一个不同都会产
本文向大家介绍详解SpringBoot多跨域请求的支持(JSONP),包括了详解SpringBoot多跨域请求的支持(JSONP)的使用技巧和注意事项,需要的朋友参考一下 在我们做项目的过程中,有可能会遇到跨域请求,所以需要我们自己组装支持跨域请求的JSONP数据,而在4.1版本以后的SpringMVC中,为我们提供了一个AbstractJsonpResponseBodyAdvice的类用来支持j
本文向大家介绍详解Springboot+React项目跨域访问问题,包括了详解Springboot+React项目跨域访问问题的使用技巧和注意事项,需要的朋友参考一下 一、开发环境 框架:springboot 1.5.10.RELEASE 开发工具:IDEA JDK:1.8 前端框架:React 15.6.1 浏览器:Chrome浏览器 二、跨域问题 本地使用ajax访问localhost:808
本文向大家介绍Springmvc ajax跨域请求处理方法实例详解,包括了Springmvc ajax跨域请求处理方法实例详解的使用技巧和注意事项,需要的朋友参考一下 上次给一个网站写网站 前后端分离 最后跪在ajax跨域上面了 自己在网上找了个方法 亲试可用 记录一下 写一个类 继承HandlerInterceptorAdapter 然后在xml里面配置一下路径 这样就可以了 不过
本文向大家介绍Django+Vue跨域环境配置详解,包括了Django+Vue跨域环境配置详解的使用技巧和注意事项,需要的朋友参考一下 概述 在使用Django+Vue开发过程中,遇到了很多开发环境相关的问题,比如跨域,比如ajax请求参数等,本篇文章主要记录解决在开发过程中,遇到的一些问题。 跨域不带Cookie 在使用Vue脚手架开发的过程中,会使用Vue脚手架自带的Server进行项目调试,
问题内容: 我必须从域B.com调用域A.com(使用http设置cookie)。我在B.com域上所做的就是(javascript): 这将在我测试过的所有浏览器(Safari除外)上在A.com上设置Cookie。令人惊讶的是,即使没有P3P标头,它也可以在IE6中使用。 有什么办法可以使它在Safari中工作吗? 问题答案: 来自: Safari附带了一种保守的cookie策略,该策略将co
使用指南 - 统计设置 - 统计规则设置 - 如何设置跨域监控 如图所示,在“管理-统计规则设置”中可以看到“跨域跟踪”功能。在“已设置跨域监控的网站域名”列表下,系统会展示基于您网站访问数据智能生成的受访域名列表,您可以直接将相关域名设置为跨域监控。