情况描述:

最近在部署一个前后端分离的项目出现了跨域问题*,

项目使用jwt进行鉴权,需要前端请求发起携带TOKEN的请求*,请求所带的token无法成功发送给后端,

使用跨域后出现了兼容性问题:Chrome、Firefox浏览器正常,而IE还是报跨域错误

一、跨域问题在项目中可以使用CORS解决

方式一

@CrossOrigin

在每个controller类加上

方式二 直接在spring-mvc中加入配置

<!-- 接口跨域配置 -->

<mvc:cors>

<mvc:mapping path="/**"

allowed-origins="*"

allowed-methods="POST, GET, OPTIONS, DELETE, PUT"

allowed-headers="Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"

allow-credentials="true" />

</mvc:cors>

方式三 可以在interceptor中向response增加header

response.setHeader("Access-Control-Allow-Origin", "*");

response.setHeader("Access-Control-Allow-Credentials", "true");

response.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, PATCH, DELETE, OPTIONS");

response.setHeader("Access-Control-Max-Age", "86400");

response.setHeader("Access-Control-Allow-Headers", "Authorization,Overwrite, Destination, Content-Type, Depth, User-Agent, Translate, Range, Content-Range, Timeout, X-File-Size, X-Requested-With, If-Modified-Since, X-File-Name, Cache-Control, Location, Lock-Token, If");

上面三种方式对一般的简单跨域请求有效,可以满足大部分需要。但遇到非简单跨域请求的情况,就会出现问题,需要做一下调整。

二、复杂请求下需要对options预检请求进行处理

前后端分离的项目中,浏览器请求中经常会出现非简单跨域请求,这将会发送请求2次,第一条由浏览器发起请求为options的预检请求,再根据服务器的返回内容由浏览器判断服务器是否允许此次请求,第二条才是method中的get,post或者put等,并且第一条无任何数据返回,第二条才正常返回数据。

所以我们会遇到:我们处理token的拦截器(非简单情况,在header的authorization携带了token进行鉴权),在接收到option的时候将这个预检请求当成正常的请求,而options请求时无法在header携带token的,因此后端将会把第一个请求打回,导致第二个请求无法正常发起。

非简单情况(含以下之一):

  1. 请求方式:PUT、DELETE
  2. 自定义头部字段
  3. 发送json格式数据
  4. 正式通信之前,浏览器会先发送OPTION请求,进行预检,这一次的请求称为“预检请求”
  5. 服务器成功响应预检请求后,才会发送真正的请求,并且携带真实数据

解决方式  在后端中对options请求进行直接给通过(只要返回200、204,浏览器即判断服务器允许请求)

增加一个CorsInterceptor

public class CorsInterceptor implements HandlerInterceptor {

//使用了方式三、进行CORS配置

        response.setHeader("Access-Control-Allow-Origin", "*");

        response.setHeader("Access-Control-Allow-Credentials", "true");

        response.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, PATCH, DELETE, OPTIONS");

        response.setHeader("Access-Control-Max-Age", "86400");

        response.setHeader("Access-Control-Allow-Headers", "Authorization,Overwrite, Destination, Content-Type, Depth, User-Agent, Translate, Range, Content-Range, Timeout, X-File-Size, X-Requested-With, If-Modified-Since, X-File-Name, Cache-Control, Location, Lock-Token, If");

        if(HttpMethod.OPTIONS.toString().equals(httpServletRequest.getMethod())){

            response.setStatus(HttpStatus.NO_CONTENT.value());

            System.out.println("是options请求、跳过");

            return false;

        }

        return true;

    }

}

  

在spring-mvc中加载这个CorsInterceptor,置于token处理之前

        <mvc:interceptor>

            <mvc:mapping path="/**" />

            <bean class="cn.gdyvc.interceptor.CorsInterceptor" />

        </mvc:interceptor>

三、CORS浏览器兼容问题

最后部署完成,但是Chrome、Firefox浏览器正常,而IE还是报跨域错误,遇到了Internet Explorer与Access-Control-Allow-Methods的CORS问题

刚开始跨域配置根据网上的的设置将Access-Control-Allow-Headers对应设置为“*”,而Ie的是不能够响应*的,需要将header的各列单独列出来

参考链接:

https://www.jianshu.com/p/5c637bfcc674

https://stackoverflow.com/questions/51857247/ie-cors-access-control-allow-headers-error-even-though-headers-are-specified

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers

前后端分离java、jwt项目进行CORS跨域、解决非简单请求跨域问题、兼容性问题的更多相关文章

  1. 基于Spring Boot+Spring Security+JWT+Vue前后端分离的开源项目

    一.前言 最近整合Spring Boot+Spring Security+JWT+Vue 完成了一套前后端分离的基础项目,这里把它开源出来分享给有需要的小伙伴们 功能很简单,单点登录,前后端动态权限配 ...

  2. springBoot 搭建web项目(前后端分离,附项目源代码地址)

    springBoot 搭建web项目(前后端分离,附项目源代码地址)   概述 该项目包含springBoot-example-ui 和 springBoot-example,分别为前端与后端,前后端 ...

  3. 在前后端分离的SpringBoot项目中集成Shiro权限框架

    参考[1].在前后端分离的SpringBoot项目中集成Shiro权限框架 参考[2]. Springboot + Vue + shiro 实现前后端分离.权限控制   以及跨域的问题也有涉及

  4. [django]前后端分离之JWT用户认证

    在前后端分离开发时为什么需要用户认证呢?原因是由于HTTP协定是不储存状态的(stateless),这意味着当我们透过帐号密码验证一个使用者时,当下一个request请求时它就把刚刚的资料忘了.于是我 ...

  5. 前后端分离之JWT用户认证(转)

    在前后端分离开发时为什么需要用户认证呢?原因是由于HTTP协定是不储存状态的(stateless),这意味着当我们透过帐号密码验证一个使用者时,当下一个request请求时它就把刚刚的资料忘了.于是我 ...

  6. 前后端分离之JWT用户认证zf

    在前后端分离开发时为什么需要用户认证呢?原因是由于HTTP协定是不储存状态的(stateless),这意味着当我们透过帐号密码验证一个使用者时,当下一个request请求时它就把刚刚的资料忘了.于是我 ...

  7. [转] 前后端分离之JWT用户认证

    [From] http://www.jianshu.com/p/180a870a308a 在前后端分离开发时为什么需要用户认证呢?原因是由于HTTP协定是不储存状态的(stateless),这意味着当 ...

  8. 前后端分离之JWT用户认证

    在前后端分离开发时为什么需要用户认证呢?原因是由于HTTP协定是不储存状态的(stateless),这意味着当我们透过帐号密码验证一个使用者时,当下一个request请求时它就把刚刚的资料忘了.于是我 ...

  9. Cookie、Session、Token那点事儿和前后端分离之JWT用户认证

    (两篇文章转自:https://www.jianshu.com/p/bd1be47a16c1:https://www.jianshu.com/p/180a870a308a) 什么是Cookie? Co ...

随机推荐

  1. MySQL 数据类型 详解

    MySQL 数据类型 详解 MySQL 的数值数据类型可以大致划分为两个类别,一个是整数,另一个是浮点数或小数.许多不同的子类型对这些类别中的每一个都是可用的,每个子类型支持不同大小的数据,并且 My ...

  2. angular run()运行块

    和配置块不同,运行块在注入器创建之后被执行,它是所有AngularJS应用中第一个被执行的方法. 运行块是AngularJS中与main方法最接近的概念.运行块中的代码块通常很难进行单元测试,它是和应 ...

  3. 如何使用NET Reactor为您的.Net(C#,VB.Net) 源代码加密

    前言 VS开发的源代码安全性,是很多开发者头痛的事情.于是保护好源代码便成了开发者们最关心的事情之一了. 在网上搜一搜,很多有不少的第三方工具可以为源代码加密.加密方式不外乎就是混淆,加壳. 理论上, ...

  4. [转] PostgreSQL学习手册(函数和操作符)

    一.逻辑操作符: 常用的逻辑操作符有:AND.OR和NOT.其语义与其它编程语言中的逻辑操作符完全相同. 二.比较操作符: 下面是PostgreSQL中提供的比较操作符列表: 操作符 描述 < ...

  5. Mybatis Generator实现分页功能

    Mybatis Generator实现分页功能 分类: IBATIS2013-07-17 17:03 882人阅读 评论(1) 收藏 举报 mybatisibatisgeneratorpage分页 众 ...

  6. 【Intellij idea】spring中@Autowired注入失败

    @Autowired注入失败失败的解决办法? 现有的解决的方案是: 打开file-settings或者ctrl+alt+s -> Editor 然后在Inspections 点击搜索栏 输入Sp ...

  7. BugkuCTF sql注入

    前言 写了这么久的web题,算是把它基础部分都刷完了一遍,以下的几天将持续更新BugkuCTF WEB部分的题解,为了不影响阅读,所以每道题的题解都以单独一篇文章的形式发表,感谢大家一直以来的支持和理 ...

  8. [SLAM] 03. ORB-SLAM2

    一年后再读SLAM~ 行业有了不少工程实践方面的突破 一.链接:https://www.zhihu.com/question/53571648/answer/176732257 目前来说,受到业界肯定 ...

  9. 迭代器&amp;可迭代对象

    迭代器 能够被next调用, 并不断返回值的一个对象惰性排序, 一次只获取一个数据, (占用一个空间)迭代器可以遍历无限量的数据 特点: 1.惰性序列, 节省内存 2.遍历使用next, 方向不可逆 ...

  10. CF 463A &amp;&amp; 463B 贪心 &amp;&amp; 463C 霍夫曼树 &amp;&amp; 463D 树形dp &amp;&amp; 463E 线段树

    http://codeforces.com/contest/462 A:Appleman and Easy Task 要求是否全部的字符都挨着偶数个'o' #include <cstdio> ...