前端交互篇 - 跨域 灰太狼 2021-11-16 08:54 277阅读 0赞 # 前端交互篇 - 跨域 # -------------------- ### SpringBoot - Cors解决跨域问题 - 本地请求其他域名时cookie无法传输 ### SpringBoot 利用Cors解决跨域问题 1.依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> 2.WebConfig配置类 @Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") // 表示本应用的所有方法都会去处理跨域请求 .allowedOrigins("*") // 例如允许:http://localhost:8081请求 .allowedMethods("*") // 表示允许通过的请求数 .allowedHeaders("*") // 表示允许通过的请求头 .allowCredentials(true); // 允许前端传递cookie } } 3.HTML测试代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body onload="testCors()"> </body> <script src="js/jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> function testCors() { $.ajax({ type:'POST', url:'http://127.0.0.1:10909/apis/test', xhrFields:{ withCredentials:true}, success:function(result){ alert(result) }, error: function (err) { alert("异常") } }); } </script> </html> ### 过滤器- CROS协议 ### @Component @WebFilter(filterName = "corsFilter", urlPatterns = "/*") public class CorsFilter implements Filter { public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { HttpServletResponse response = (HttpServletResponse) servletResponse; HttpServletRequest reqs = (HttpServletRequest) servletRequest; String origin = reqs.getHeader("Origin"); if(StringUtils.isEmpty(origin)) { origin = reqs.getHeader("Referer"); } response.setHeader("Access-Control-Allow-Origin", 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", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,Authorization,Token"); filterChain.doFilter(servletRequest, servletResponse); } } // 重点 cookie处设置 根目录 -> nginx,com结尾网站都可用 Cookie cookie = new Cookie("auth_todo_token", MD5Util.MD5(username+password)+MD5Util.MD5(password+username)); cookie.setPath("/"); cookie.setDomain("nginx.com"); // 重点:本地开发host配置 -> 正式上线后项目Domain依据真实后缀修改即可 127.0.0.1 test.nginx.com 47.93.6.66 server.nginx.com // Html - Ajax请求: $.ajax({ type:'POST', url:'http://server.nginx.com:10909/apis/loginAccess', // 重点:携带跨域cookie xhrFields: { withCredentials: true }, ..... }); ### 最佳方案 - Nginx解决跨域问题 ### 跨域问题产生原因: 域名[主域名与子域名也算]不同 端口不同 协议不同 特注:Ip与域名之间网络交互,也属于跨域,如:123.23.23.12 和 www.a.com 因此通过nginx进行反向代理解决该问题 如: nginx部署静态资源 -> 地址为 127.0.0.1/html/index.html 接口地址为: 111.111.111.111:8080/apis/test 则可以通过nginx 将127.0.0.1 配置前缀的方式代理真实接口地址即: 127.0.0.1/apis/* ===> 111.111.111.111:8080/apis/test 然后本地界面请求即不会产生跨域问题, 部署详情见nginx篇 ### 升级方案 - oauth2.0 ### 利用oauth2.0 token验证的方式, 网关层代理及nginx代理解决跨域问题和权限验证的问题
相关 前端跨域调用 . 前端跨域调用的流程 以csdn为例 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6... 逃离我推掉我的手/ 2024年04月19日 15:07/ 0 赞/ 27 阅读
相关 前端跨域 什么是跨域 同源策略是一种约定,它是浏览器的最核心也是最安全的功能,如果缺少同源策略,浏览器很容易受到xss,csrf等攻击。所谓的同源的就是“协议+域名+端口”,即使两个 ╰+攻爆jí腚メ/ 2023年01月07日 07:21/ 0 赞/ 163 阅读
相关 前端跨域案例 [vue解决跨域方法][vue] 什么是跨域 跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议,端口,域名。只要这个3个中有一个不同就是 「爱情、让人受尽委屈。」/ 2023年01月05日 12:09/ 0 赞/ 127 阅读
相关 前端解决跨域 跨域:在浏览器里面当协议、域名、端口有任何一项不同的时候就会产生跨域 处理跨域的方式:JsonP(只能处理get请求)、cors(后端开启)、代理服务器 前两种已经在之前 男娘i/ 2022年12月02日 01:00/ 0 赞/ 185 阅读
相关 前端跨域问题 跨域 1、域名地址组成 域名组成图如下:域名组成.png ![这里写图片描述][SouthEast] 当协议、主域名、端口号中任意一个不相同 不念不忘少年蓝@/ 2022年07月12日 12:36/ 0 赞/ 207 阅读
相关 前端跨域访问 一、同源策略 做过开发的都知道,从A网站通过Ajax来请求另外一个B网站的特定内容,是很常见的需求,但是出于安全的考虑,浏览器是不允许你这样做的,这就是浏览器的同源策略; 曾经终败给现在/ 2022年06月14日 01:44/ 0 赞/ 226 阅读
相关 前端跨域相关 转自:[前端跨域(全)][Link 1] 什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。 广义的跨域: 布满荆棘的人生/ 2022年05月29日 09:16/ 0 赞/ 207 阅读
相关 前端跨域 什么是跨域? 跨域,指的是浏览器不能执行其他网站的脚本。它是由ajax网络通信限制造成的,是浏览器施加的安全限制。 所谓同源是指,域名,协议,端口均相同,不明白没关系,举 今天药忘吃喽~/ 2022年04月22日 01:54/ 0 赞/ 197 阅读
相关 前端交互篇 - 跨域 前端交互篇 - 跨域 -------------------- SpringBoot - Cors解决跨域问题 - 本地请求其他域名时cookie无法传输 灰太狼/ 2021年11月16日 08:54/ 0 赞/ 278 阅读
相关 前端跨域 前端跨域 一、什么是跨域 二、网址解析: 三、解决跨域 1.src 2.jsonp 3.jq中的jsonp 雨点打透心脏的1/2处/ 2021年09月07日 06:09/ 0 赞/ 382 阅读
还没有评论,来说两句吧...