前后端分离java、jwt项目进行CORS跨域、解决非简单请求跨域问题、兼容性问题
情况描述:
最近在部署一个前后端分离的项目出现了跨域问题*,
项目使用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的,因此后端将会把第一个请求打回,导致第二个请求无法正常发起。
非简单情况(含以下之一):
- 请求方式:PUT、DELETE
- 自定义头部字段
- 发送json格式数据
- 正式通信之前,浏览器会先发送OPTION请求,进行预检,这一次的请求称为“预检请求”
- 服务器成功响应预检请求后,才会发送真正的请求,并且携带真实数据
解决方式 在后端中对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://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers
前后端分离java、jwt项目进行CORS跨域、解决非简单请求跨域问题、兼容性问题的更多相关文章
- 基于Spring Boot+Spring Security+JWT+Vue前后端分离的开源项目
一.前言 最近整合Spring Boot+Spring Security+JWT+Vue 完成了一套前后端分离的基础项目,这里把它开源出来分享给有需要的小伙伴们 功能很简单,单点登录,前后端动态权限配 ...
- springBoot 搭建web项目(前后端分离,附项目源代码地址)
springBoot 搭建web项目(前后端分离,附项目源代码地址) 概述 该项目包含springBoot-example-ui 和 springBoot-example,分别为前端与后端,前后端 ...
- 在前后端分离的SpringBoot项目中集成Shiro权限框架
参考[1].在前后端分离的SpringBoot项目中集成Shiro权限框架 参考[2]. Springboot + Vue + shiro 实现前后端分离.权限控制 以及跨域的问题也有涉及
- [django]前后端分离之JWT用户认证
在前后端分离开发时为什么需要用户认证呢?原因是由于HTTP协定是不储存状态的(stateless),这意味着当我们透过帐号密码验证一个使用者时,当下一个request请求时它就把刚刚的资料忘了.于是我 ...
- 前后端分离之JWT用户认证(转)
在前后端分离开发时为什么需要用户认证呢?原因是由于HTTP协定是不储存状态的(stateless),这意味着当我们透过帐号密码验证一个使用者时,当下一个request请求时它就把刚刚的资料忘了.于是我 ...
- 前后端分离之JWT用户认证zf
在前后端分离开发时为什么需要用户认证呢?原因是由于HTTP协定是不储存状态的(stateless),这意味着当我们透过帐号密码验证一个使用者时,当下一个request请求时它就把刚刚的资料忘了.于是我 ...
- [转] 前后端分离之JWT用户认证
[From] http://www.jianshu.com/p/180a870a308a 在前后端分离开发时为什么需要用户认证呢?原因是由于HTTP协定是不储存状态的(stateless),这意味着当 ...
- 前后端分离之JWT用户认证
在前后端分离开发时为什么需要用户认证呢?原因是由于HTTP协定是不储存状态的(stateless),这意味着当我们透过帐号密码验证一个使用者时,当下一个request请求时它就把刚刚的资料忘了.于是我 ...
- Cookie、Session、Token那点事儿和前后端分离之JWT用户认证
(两篇文章转自:https://www.jianshu.com/p/bd1be47a16c1:https://www.jianshu.com/p/180a870a308a) 什么是Cookie? Co ...
随机推荐
- System.Reflection.ReflectionTypeLoadException
引用了一个第三方dll, 此dll经过混淆,但是未签名. 然后,主程序无法反射了, 取消主程序的签名后正常反射.
- Oracle自动备份bat
很多时候我们需要自动备份数据库这边推荐bat+Windows计划任务实现 方案1 创建以下bat 然后添加到TaskSchedule(路径最好不要包含中文) @echo off @echo ===== ...
- 使用WinDbg分析蓝屏dump原因
大多数人或许都经历过系统蓝屏问题,然而大多数人不清楚该怎么处理蓝屏问题,这里主要对系统蓝屏做一些解释,同时介绍下蓝屏问题分析工具WinDbg分析蓝屏问题的一般步骤. 微软官方对蓝屏的定义是,当系统遇到 ...
- UVALive - 7752 Free Figurines
题意:有n个娃娃,如果大娃娃j直接套小娃娃i,则fa[i] = j.若fa[i] = 0,则该娃娃自由.给出每个娃娃初始的父亲,和改变后的父亲,在满足以下合法操作的条件下,问最少需要多少次变换. 1. ...
- python学习笔记2018-9-18
1.可选参数传递 此处m=1并不是写定m必为1,而是m为可选参数,当不对其进行赋值时,其默认值为1. 2.函数的返回值 return可以传递0个返回值,也可以传递任意多个返回值 3.局部变量与全局变量 ...
- eclipse中使用jstl
错误提示为"can not find the tag library for http://java.sun.com/jsp/jstl/core" 这是我在练习把axis2和普通j ...
- WinForm读写App.config配置文件
一.配置文件概述: 应用程序配置文件是标准的 XML 文件,XML 标记和属性是区分大小写的.它是可以按需要更改的,开发人员可以使用配置文件来更改设置,而不必重编译应用程序.配置文件的根节点是conf ...
- PostAsync与GetAsync
using Newtonsoft.Json; using Newtonsoft.Json.Linq; using System; using System.Collections.Generic; u ...
- HDU 4901 多校4 经典计数DP
RT 最近不想写博客,累积了一周多的题目,今天趁着周日放假,全部补上吧 dp[i][j]表示前i个数,操作后的值为j的总个数 注意取或不取,有种完全背包的意味.因为数字小于1024,所以异或的结果也绝 ...
- 设置此div的子元素居中显示
下面样式设置到父div上: .modal { display: flex; align-items: center; /*竖直居中 垂直居中*/ justify-content: center; /* ...