html如何给header添加token,将Token添加到请求头Header中
概述
在使用JSON Web Token作为单点登录的验证媒介时,为保证安全性,建议将JWT的信息存放在HTTP的请求头中,并使用https对请求链接进行加密传输,效果如下图所示:
问题
1.由于项目是前后端分离的,不可避免的就产生了跨域问题,导致Authorization始终无法添加到请求头中去,出现的请求如下图所示:
原因:理论请看这篇文章:(点这里),简单来说就是,当在进行跨域请求的时候,如图自定义请求头,如添加Authorization字段,那么HTTP请求会发出一个预检请求,即OPTIONS请求,访问服务器是否允许该请求,如果浏览器没有进行跨域设置,则就会出现如上图所示的错误。
解决办法:浏览器设置跨域处理,这里介绍最简单的方式
1.引用跨域处理的jar包
com.thetransactioncompany
cors-filter
2.在Web.xml中添加如下配置:
注意要在下图的位置添加上自定义的请求头字段:Authorization
CORS
com.thetransactioncompany.cors.CORSFilter
cors.allowOrigin
*
cors.supportedMethods
GET, POST, HEAD, PUT, DELETE
cors.supportedHeaders
Authorization,Accept, Origin,X-Requested-With, Content-Type, Last-Modified
cors.exposedHeaders
Set-Cookie
cors.supportsCredentials
true
CORS
/*
这样浏览器请求的时候就会成功响应预检请求了,如下图:
应用
Ajax添加Token到Header中的方法
1.方法一:
$.ajax({
type:"GET",
url: "/access/logout/" + userCode,
headers: {‘Authorization‘: token}
});
2.方法二:
$.ajax({
type: "GET",
url: "/access/logout/" + userCode,
beforeSend: function(request) {
request.setRequestHeader("Authorization", token);
},
success: function(result) {
}
});
Anjular添加Token到Header中的方法
1.自定义Http方法,全局使用自动添加Token到Header中,或者使用拦截器,方法类似。
import {Observable} from ‘rxjs/Observable‘;
import {Injectable} from from const mergeToken = (options: RequestOptionsArgs = {}) => {
const newOptions = new RequestOptions({}).merge(options);
const newHeaders = new Headers(newOptions.headers);
const jwt = localStorage.getItem(‘jwt‘);
if (jwt) {
newHeaders.set(‘Authorization‘, jwt);
}
newOptions.headers = newHeaders;
return newOptions;
};
@Injectable()
export class MyHttp {
constructor(private http: Http) {
}
get(url: string, options?: RequestOptionsArgs): Observable {
return this.http.get(url, mergeToken(options));
}
post(url: string, body: any, options?: RequestOptionsArgs): Observable {
return this.http.post(url, body, mergeToken(options));
}
put(url: string, body: any, options?: RequestOptionsArgs): Observable {
return this.http.put(url, body, mergeToken(options));
}
delete(url: string, options?: RequestOptionsArgs): Observable {
return this.http.delete(url, mergeToken(options));
}
patch(url: string, body: any, options?: RequestOptionsArgs): Observable {
return this.http.patch(url, body, mergeToken(options));
}
head(url: string, options?: RequestOptionsArgs): Observable {
return this.http.head(url, mergeToken(options));
}
}
2.参考这个链接的方法,没有测试过,需要测试。
总结:有时候问题不是不能解决,而是需要多了解知识,从多个角度来思考问题,这也是这个问题困扰了好长时间的原因。
html如何给header添加token,将Token添加到请求头Header中相关推荐
- 微信小程序设置请求头header 参数 token 验证
小程序开发中需要在请求头header中用到 token 验证 header:{ 'content-type': 'application/x-www-form-urlencoded', 'access ...
- Android Retrofit2 动态(静态)添加请求头Header
Retrofit提供了两个两种定义HTTP请求头字段的方法即静态和动态.静态头不能改变为不同的请求,头的键和值是固定的且不可改变的,随着程序的打开便已固定. 动态添加 @Header @GET(&qu ...
- java http head 请求_http请求头header、请求体body、请求行介绍
HttpServletRequest对象代表客户端的请求,当客户端通过http协议请求访问 服务器的时候,http请求头的所有信息都封装在这个对象中,通过这个对象,可以获取客户端请求的所有信息.htt ...
- http请求头header、请求体body、请求行介绍
HttpServletRequest对象代表客户端的请求,当客户端通过http协议请求访问 服务器的时候,http请求头的所有信息都封装在这个对象中,通过这个对象,可以获取客户端请求的所有信息.htt ...
- 前端cookie 放到请求头_ajax请求携带cookie和自定义请求头header(跨域和同域)
错误: 1.ajax请求时是不会自动带上cookie的,要是想让他带上的话,必须设置withCredential为true. 正确: 1.ajax同域请求下,ajax会自动带上同源的cookie: 2 ...
- 解决通过Nginx转发的服务请求头header中含有下划线的key,其值取不到的问题
解决通过Nginx转发的服务请求头header中含有下划线的key,其值取不到的问题 参考文章: (1)解决通过Nginx转发的服务请求头header中含有下划线的key,其值取不到的问题 (2)ht ...
- 构建header爬虫构建请求头header
今天学写爬虫,刚上来就碰壁了,大多数浏览器都有反爬虫机制,于是要学会设置请求头header,这样就可以伪装成浏览器. Header来源 打开任意浏览器某一网页,按F12,点开network,再按提示按 ...
- 关于请求头header,token,setHeader()
怎么获取token String token = request.getHeader("Authorization"); 这里的Authorization存放的就是token 怎么 ...
- token放在cookie中和放在请求头中的区别
token放在cookie中 和 放在请求 头中的区别 cookie中: 防止xss攻击,但是导致所有请求都会携带token 请求头中: 会有xss风险,而且前端需要保存token并在每次请求的时候携 ...
最新文章
- 用于自然语言处理的卷积网络
- The type android.support.v4.view.ScrollingView cannot be resolved. It is indirectly referenced from
- 阿里巴巴 DevOps 工具体系
- php 获取网页内容 四种方法
- 信息学奥赛C++语言:最小数输出
- 2017.3.7 搞笑世界杯 失败总结
- Vue(八)发送跨域请求
- Asp.net Core 添加 EF 工具并执行初始迁移错误解决方法(Add-Migration Initial---Build failed.)
- Axure rp 8 基本用法图解之一
- sou.php,phpsou RiSearchPHP是一个高效 联合开发网 - pudn.com
- 使用python处理wps表格_Python处理Word文件的实用姿势
- 大写汉字转阿拉伯数字c语言,把中文汉字大写数字 转换成 阿拉伯数字
- 直播行业迎来多元化发展
- 贪心科技机器学习训练营(二)
- mysql索引一般什么数据结构_mysql索引一般使用什么数据结构
- 脚本小子进阶之路(一)用开源武装自己
- Apollo学习笔记(19)UKF
- Servlet概念性回顾(结合Ajax)
- 奥鹏教师计算机培训总结,奥鹏信息技术应用能力提升培训总结交流
- 计算机网络原理第三篇 数据链路层