通过过滤器实现前后端分离的跨域问题

创建过滤器解决跨域问题

(就是前后端在不同服务器上运行)注意:局部和全局只能选择一种!!!
本文只讲述了解决跨域问题的方法,不提供源码讲解。

开启跨域配置

如果使用了springsecurity则需要在securityconfig中添加 .cors()

全局开启:

copy
SecurityConfig:(随便一个config都行,这里就先放在securityconfig里) @Bean public CorsFilter corsFilter() { //创建CorsConfiguration对象后添加配置 CorsConfiguration config = new CorsConfiguration(); //设置放行哪些原始域,这里直接设置为所有 config.addAllowedOriginPattern("*"); //你可以单独设置放行哪些原始域 config.addAllowedOrigin("http://localhost:2222"); //放行哪些原始请求头部信息 config.addAllowedHeader("*"); //放行哪些请求方式,*代表所有 config.addAllowedMethod("*"); //是否允许发送Cookie,必须要开启,因为我们的JSESSIONID需要在Cookie中携带 config.setAllowCredentials(true); //映射路径 UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource(); corsConfigurationSource.registerCorsConfiguration("/**", config); //返回CorsFilter return new CorsFilter(corsConfigurationSource); }

局部开启:在controller类上加注解@CrossOrigin( 可以详细看注解里面的设置

copy
@CrossOrigin @RestController @RequestMapping("/api/user") public class AccountApiController { }

设置前端发送的请求携带cookie

如果是自己写的前端需要在发送每个请求的时候带cookie信息(自定义请求,开启get、post请求时带cookie)

copy
function get(url,data, success){ $.ajax({ type: "get", url: url, data:data, async: true, dataType: 'json', xhrFields: { withCredentials: true //开启携带cookie信息,用于security识别用户是否登录 }, success: success }); } function post(url, data, success){ $.ajax({ type: "post", url: url, async: true, data: data, dataType: 'json', xhrFields: { withCredentials: true }, success: success }); } //举例: function initUserInfo() { get('http://localhost:8080/api/user/info', {},function (data) { //这里要加{},告诉data是空,否则会吧后面的当作data if (data.code === 200) { alert("登录成功,欢迎" + data.data.username + "进入图书管理系统!") } else { alert(data.reason) window.location = "http://localhost:8080/login.html" } }) }
posted @   不吃紫菜  阅读(317)  评论(0编辑  收藏  举报
相关博文:
点击右上角即可分享
微信分享提示
💬
评论
📌
收藏
💗
关注
👍
推荐
🚀
回顶
收起