这篇文章主要介绍了Spring Boot 2.0.2+Ajax如何解决跨域请求,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
成都创新互联公司沟通电话:13518219792,为您提供成都网站建设网页设计及定制高端网站建设服务,成都创新互联公司网页制作领域10年,包括成都湿喷机等多个方面拥有丰富的网站制作经验,选择成都创新互联公司,为企业锦上添花。
问题描述
后端域名为A.abc.com,前端域名为B.abc.com。浏览器在访问时,会出现跨域访问。浏览器对于javascript的同源策略的限制。
HTTP请求时,请求本身会返回200,但是返回结果不会走success,并且会在浏览器console中提示:
已拦截跨源请求:同源策略禁止读取位于 https://www.baidu.com/ 的远程资源。(原因:CORS 头缺少 ‘Access-Control-Allow-Origin')。
解决方案
1.jsonp
2.引用A站的js
3.Nginx做A站的反向代理
4.后端服务放开跨域请求
其中,以最后两种见常。
详细方案
本文主要描述第四种解决方案:后端服务放开跨域请求。
spring boot中放开跨域请求很简单。
1.增加一个configuration类
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; /** * 跨域访问配置 * @author wencst * @creation 2017年8月18日 */ @Configuration public class CustomCORSConfiguration { private CorsConfiguration buildConfig() { CorsConfiguration corsConfiguration = new CorsConfiguration(); corsConfiguration.addAllowedOrigin("*"); corsConfiguration.addAllowedHeader("*"); corsConfiguration.addAllowedMethod("*"); return corsConfiguration; } @Bean public CorsFilter corsFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration("/**", buildConfig()); return new CorsFilter(source); } }
增加此类以后,非同源http访问可以正常进行了,但是会不会有什么问题呢?
对于大部分网站依然需要使用cookie作为前后端传输数据的媒介,然而默认非同源请求是不携带cookie信息的。
2.服务端允许跨域携带cookie信息
在spring boot2.0.2中,允许跨域设置比较简单,只需增加一个configuration类即可。
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; /** * 跨域访问配置 * @author wencst * @creation 2017年8月18日 */ @Configuration public class CustomCORSConfiguration { private CorsConfiguration buildConfig() { CorsConfiguration corsConfiguration = new CorsConfiguration(); corsConfiguration.addAllowedOrigin("*"); corsConfiguration.addAllowedHeader("*"); corsConfiguration.addAllowedMethod("*"); corsConfiguration.addExposedHeader("Content-Type"); corsConfiguration.addExposedHeader( "X-Requested-With"); corsConfiguration.addExposedHeader("accept"); corsConfiguration.addExposedHeader("Origin"); corsConfiguration.addExposedHeader( "Access-Control-Request-Method"); corsConfiguration.addExposedHeader("Access-Control-Request-Headers"); corsConfiguration.setAllowCredentials(true); return corsConfiguration; } @Bean public CorsFilter corsFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration("/**", buildConfig()); return new CorsFilter(source); } }
增加信息后,在前端依然需要调整AJAX请求,才能在非同源请求中携带cookie信息。
3.前端调整
$.ajax({ url: 'http://beta.roboming.com/api.php?s=/Public/AdminLogin.html', type: 'POST', async:true, xhrFields:{ withCredentials:true }, data: { username:userName, password:pwd }, success: function(respon){ console.log(respon); var res=eval(respon); }, error: function(){ alert('服务器发生错误!'); } });
此时,当前端向后端服务做跨域请求时,增加
xhrFields:{ withCredentials:true },
就会带上cookie信息了,同理会带上token/sessionID等等内容。
测试方法
spring boot中增加一个controller
@Controller public class LoginController { @RequestMapping(value = "setString") @ResponseBody public String setString(HttpServletRequest request, HttpServletResponse response,@RequestParam String value) { request.getSession().setAttribute("username", value); return "OK"; } @RequestMapping(value = "getString") @ResponseBody public String getString(HttpServletRequest request, HttpServletResponse response) { String username = (String)request.getSession().getAttribute("username"); return username; } }
增加一个index.html,来访问跨域访问。
<html> <head> <meta charset="utf-8"> <title>跨域请求</title> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> </head> <body> <button onclick="set()">set</button> <br><br> <button onclick="get()">get</button> <script> function set(){ $.ajax({ url:'http://wencst.vicp.net/setString?value=10', xhrFields:{ withCredentials:true }, success:function(result){ alert(result); } }); } function get(){ $.ajax({ url:'http://wencst.vicp.net/getString', xhrFields:{ withCredentials:true }, success:function(result){ alert(result); } }); } </script> </body> </html>
html文件可以单独本地访问即可出现效果,并不一定要形成服务访问。
当服务端不允许跨域访问时,html文件访问均报错,并调用失败。
当服务端允许跨域访问时,html请求访问成功。
当服务端开启cookie传递,并在html文件中增加 xhrFields参数时,session生效
。
感谢你能够认真阅读完这篇文章,希望小编分享的“Spring Boot 2.0.2+Ajax如何解决跨域请求”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!
分享文章:SpringBoot2.0.2+Ajax如何解决跨域请求
当前网址:https://www.cdcxhl.com/article8/jdigip.html
成都网站建设公司_创新互联,为您提供静态网站、全网营销推广、做网站、小程序开发、App开发、软件开发
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联