springboot CORS 跨域请求解决三大方案,springboot CorsFilter解决跨域问题
springboot CORS解决 No 'Access-Control-Allow-Origin' header is present on the requested resource
================================
©Copyright 蕃薯耀 2020-11-24
http://fanshuyao.iteye.com/
跨域请求,一般是在页面调用ajax请求向别的服务发送请求,因域名不相同,导致跨域
解决跨域请求的方式有:
一、远程服务器支持跨域请求(CORS 跨域)
二、使用nginx反向代理
三、服务器端使用Http请求
四、使用jsonp
下面以远程服务器支持跨域请求(CORS 跨域)为例:
其中有三种方式让远程服务器支持跨域请求
方式一、使用注解:@CrossOrigin
1、在类上加注解,表示类下所有方法都支持跨域请求
@CrossOrigin @RestController @RequestMapping("cross") public class AaaController { }
2、在方法加注解,表示该方法运动跨域请求
@RestController @RequestMapping("cross") public class AaaController { @CrossOrigin @RequestMapping("/bbb") public Result bbb(HttpServletRequest request, HttpServletResponse response) throws Exception { …… } }
方式二、实现WebMvcConfigurer接口,重写addCorsMappings方法(官方文档全局配置跨域请求使用的是此方式)
import java.nio.charset.Charset; import java.util.ArrayList; import java.util.List; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.http.MediaType; import org.springframework.http.converter.HttpMessageConverter; import org.springframework.http.converter.json.MappingJackson2HttpMessageConverter; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; import com.test.util.JsonUtil; @Configuration public class MvcConfig implements WebMvcConfigurer { /** * 解决跨域请求 * @return */ @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowCredentials(true) .allowedOrigins("*") .allowedHeaders("*") .allowedMethods("*") .maxAge(3600); WebMvcConfigurer.super.addCorsMappings(registry); } /** * 解决@RestController返回json结果时,IE浏览器出现下载json文件的现象。 * @return */ @Bean public MappingJackson2HttpMessageConverter jackson2HttpMessageConverter() { MappingJackson2HttpMessageConverter jsonConverter = new MappingJackson2HttpMessageConverter(); List<MediaType> supportedMediaTypes = new ArrayList<MediaType>(); supportedMediaTypes.add(new MediaType(MediaType.TEXT_PLAIN, Charset.forName("UTF-8"))); supportedMediaTypes.add(new MediaType(MediaType.TEXT_HTML, Charset.forName("UTF-8"))); jsonConverter.setSupportedMediaTypes(supportedMediaTypes); jsonConverter.setObjectMapper(JsonUtil.getMapper());//设置使用jackson转换器 return jsonConverter; } @Override public void configureMessageConverters(List<HttpMessageConverter<?>> converters) { converters.add(jackson2HttpMessageConverter()); } }
方式三、使用CorsFilter过滤器
import org.springframework.boot.web.servlet.FilterRegistrationBean; 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; @Configuration public class HttpFilterConfig { @Bean public FilterRegistrationBean<CorsFilter> corsFilter() { CorsConfiguration corsConfig = new CorsConfiguration(); corsConfig.setAllowCredentials(true); corsConfig.addAllowedOrigin(CorsConfiguration.ALL); corsConfig.addAllowedMethod(CorsConfiguration.ALL); corsConfig.addAllowedHeader(CorsConfiguration.ALL); //默认可不设置这个暴露的头。这个为了安全问题,不能使用*。设置成*,后面会报错:throw new IllegalArgumentException("'*' is not a valid exposed header value"); //corsConfig.addExposedHeader(""); corsConfig.setMaxAge(3600L); UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource(); configSource.registerCorsConfiguration("/**", corsConfig); FilterRegistrationBean<CorsFilter> corsBean = new FilterRegistrationBean<CorsFilter>(new CorsFilter(configSource)); corsBean.setName("crossOriginFilter"); corsBean.setOrder(0);//这个顺序也有可能会有影响,尽量设置在拦截器前面 return corsBean; } }
前端页面调用示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>跨域请求</title> <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script> </head> <body> <div>跨域请求</div> <script type="text/javascript"> function ajax(){ console.log("ajax()"); $.ajax({ //async: false,//设置为同步,默认为异步(一般不需要) url : "http://aaa.com:7010/gtkjCghj/workflow/processes", //aaa.com域名修改host文件 type : "post", dataType : "json", //contentType: "application/json;charset=UTF-8",//contentType如果设置成application/json;charset=UTF-8,就会会变成复杂请求,导致发送2次请求,第一次是options请求,第二次才是真正的请求。 data : { "processName" : "报批", "gxDocNo": "f2-202000234" }, complete : function(XMLHttpRequest, textStatus){ //alert("textStatus="+textStatus); }, error : function(XMLHttpRequest, textStatus, errorThrown){ if("error" == textStatus){ alert("服务器未响应,请稍候再试"); }else{ alert("请求失败,textStatus="+textStatus); } }, success : function(data){ if(data != null){ console.log("data===" + JSON.stringify(data)); }else{ alert("返回结果为空!"); } } }); }; ajax(); </script> </body> </html>
注意事项:
需要注意的是ajax请求中的contentType:
contentType默认的值是:application/x-www-form-urlencoded,当不设置或者为默认值时,这个是简单请求,只发送1次真正的请求。
如果contentType设置成"application/json;charset=UTF-8"会变成复杂请求,导致发送2次请求,第一次是options请求,第二次才是真正的请求。
部分服务器,是禁止发送OPTIONS请求的,这样会导致跨域问题:
jquery-3.4.1.min.js:2 OPTIONS http://test.com/gtkjCghj/workflow/processes 401 (Unauthorized) has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
简单请求
只要同时满足以下条件就属于简单请求
1、请求方法是以下三种方法之一:GET、POST、HEAD
2、Http的头信息不超出以下几种字段:Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type。
Content-Type只限于三个值:application/x-www-form-urlencoded、multipart/form-data、text/plain
简单请求的请求头示例:
其中:Content-Type: application/x-www-form-urlencoded; charset=UTF-8
POST /gtkjCghj/workflow/processes HTTP/1.1 Host: aaa.com:7010 Connection: keep-alive Content-Length: 212 Accept: application/json, text/javascript, */*; q=0.01 Origin: http://127.0.0.1:7010 User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36 Content-Type: application/x-www-form-urlencoded; charset=UTF-8 Referer: http://127.0.0.1:7010/gtkjCghj/static/cross.html Accept-Encoding: gzip, deflate Accept-Language: zh-CN,zh;q=0.9
非简单请求,发送OPTIONS的请求头:
OPTIONS /gtkjCghj/workflow/processes HTTP/1.1 Host: aaa.com Connection: keep-alive Access-Control-Request-Method: POST Origin: http://aaa.com:7010 User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36 Access-Control-Request-Headers: content-type Accept: */* Referer: http://127.0.0.1:7010/gtkjCghj/static/cross.html Accept-Encoding: gzip, deflate Accept-Language: zh-CN,zh;q=0.9
spring CORS跨域请求解决方案总结:(建议采用方案1)
1、springboot CORS 跨域请求解决三大方案,springboot CorsFilter解决跨域问题
https://www.iteye.com/blog/fanshuyao-2517777
2、cors-filter使用,cors-filter解决跨域访问,cors-filter跨域请求
https://www.iteye.com/blog/fanshuyao-2517803
3、org.ebaysf.web的cors-filter使用,cors-filter跨域请求
https://www.iteye.com/blog/fanshuyao-2517820
4、java tomcat-catalina CorsFilter使用,apache tomcat-catalina CorsFilter使用
https://www.iteye.com/blog/fanshuyao-2517821
5、springboot jsonp 跨域请求,springboot使用jsonp跨域
https://www.iteye.com/blog/fanshuyao-2517789
================================
©Copyright 蕃薯耀 2020-11-24
http://fanshuyao.iteye.com/
相关推荐
Springboot CORS跨域设置
主要介绍了Springboot处理CORS跨域请求的三种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
跨域资源共享CORS(Cross-origin Resource Sharing),是W3C的一个标准,允许浏览器向跨源的服务器发起XMLHttpRequest请求,克服ajax请求只能同源使用的限制。关于CORS的详细解读,可参考阮一峰大神的博客:跨域资源...
CORS跨域资源共享及解决方案.docx
CORS跨域请求 文档
主要介绍了Spring boot 和Vue开发中CORS跨域问题解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
geoserver跨域设置: 1、将cors-filter-2.4.jar和java-property-utils-1.9.1.jar,两个jar包文件放入geoserver目录下webapps\geoserver\web-inf\lib中。 2、打开geoserver目录下webapps\geoserver\web-inf中的web....
主要介绍了详解springboot设置cors跨域请求的两种方式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
SpringMVC CORS跨域测试包
cors跨域Tomcat http://blog.csdn.net/itas109/article/details/70285802
ajax跨域CORS方案 JSONP跨域请求方案.zip
导入eclipse,修改resources下的mybatis-generator.xml,然后run as,输入 mvn:mybatis-generator:generate,就可以了
在Tomcat中web.xml配置了跨域过滤后,发现Tomcat启动失败,最终发现是需要cors-filter和java-property-utils这两个jar包
cors跨域
在各种服务器(nginx,apache,tomcat)上设置CORS跨域设置.zip
CORS跨域访问框架jar包,具体配置方法非常简单,网上很多教程,
Cors跨域(四):解决方案对决JSONPvsCORS.docx
主要介绍了Springboot跨域CORS处理实现原理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
本篇文章主要介绍了react中fetch之cors跨域请求的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧