authorization 传 就跨域_将Token添加到请求头Heade
概述
在使用JSON Web Token作为单点登录的验证媒介时,为保证安全性,建议将JWT的信息存放在HTTP的请求头中,并使用https对请求链接进行加密传输,效果如下图所示:
问题
1.由于项目是前后端分离的,不可避免的就产生了跨域问题,导致Authorization始终无法添加到请求头中去,出现的请求如下图所示:
原因:理论请看这篇文章:(点这里),简单来说就是,当在进行跨域请求的时候,如图自定义请求头,如添加Authorization字段,那么HTTP请求会发出一个预检请求,即OPTIONS请求,访问服务器是否允许该请求,如果浏览器没有进行跨域设置,则就会出现如上图所示的错误。
解决办法:浏览器设置跨域处理,这里介绍最简单的方式
1.引用跨域处理
com.thetransactioncompany
cors-filter
2.在Web.xml中添加如下配置:
注意要在下图的位置添加上自定义的请求头字段:Authorization 的jar包
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 '@angular/core';
import {
Http,
RequestOptionsArgs,
RequestOptions,
Response,
Headers
} from '@angular/http';
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.参考这个链接的方法,没有测试过,需要测试。
-----------------------------------------------------------------------------------------------------------------------------
authorization 传 就跨域_将Token添加到请求头Heade相关推荐
- authorization 传 就跨域_跨域访问接口上传图片出现options请求问题解决方法
1.首先因为服务器端会先发送一个option请求到后台 在后台返回一个post给页面 页面在处理post请求给接口 2.先写一个过滤器, 我们自己定义一个过滤器 package com.adtime ...
- html如何给header添加token,将Token添加到请求头Header中
概述 在使用JSON Web Token作为单点登录的验证媒介时,为保证安全性,建议将JWT的信息存放在HTTP的请求头中,并使用https对请求链接进行加密传输,效果如下图所示: 问题 1.由于项目 ...
- authorization 传 就跨域_headers中添加允许token,客户端跨域请求问题
定义了一个MyCrossOriginFilter.class,并在Access-Control-Allow-Headers 额外添加了允许"token",客户端ajax请求带有to ...
- authorization 传 就跨域_JavaScript 使用 headers Authorization 存放 token 出现跨域错误?...
在设置了 headers 请求头中的 Authorization 后出现了这个问题 请求异常 Failed to load http://host:port/auth/user/updatePassw ...
- 和跨域CORS有关的几个请求头和响应头请求头
阮一峰:http://www.ruanyifeng.com/blog/2016/04/cors.html添加链接描述 参考: https://blog.csdn.net/qq_29923881/art ...
- axios 跨域_当遇到跨域开发时,我们如何处理好前后端配置和请求库封装
我们知道很多大型项目都或多或少的采用跨域的模式开发, 以达到服务和资源的解耦和高效利用. 在大前端盛行的今天更为如此, 前端工程师可以通过nodejs或者Nginx轻松搭建起web服务器.这个时候我们 ...
- gorilla websocket无法跨域_聊聊浏览器同源策略与跨域方案详解
开发出高性能的 Web 应用固然重要,但安全问题也不容小觑.本文我们继续以 HTTP 为线索,展开来讲一讲浏览器安全相关的同源策略. 浏览器的同源策略(Same Origin Policy) 源(Or ...
- java 使用oos 进行数据上传和跨域
java 使用oos 进行数据上传和跨域 导入依赖 <dependency><groupId>com.aliyun.oss</groupId><artifac ...
- A065_运行前端_跨域_列表_删除
目录 内容介绍 1.运行后台管理前端项目 1.1.前端项目运行流程 1.1.1. 准备前端项目(使用父级模块) 1.1.2. 升级elmentui版本 1.1.3. 运行前端项目 1.1.4. 修改主 ...
- 因跨域,post请求变options请求(vue)
1.options是什么? options在此问题中属于第二种,当涉及到跨域时,并且是post请求时,本地服务器会先发送一个options请求到服务器,如果服务器认为options请求时无危险性且认可 ...
最新文章
- Jquery前端分页插件pagination同步加载和异步加载
- Linux那些事儿 之 戏说USB(25)设备的生命线(八)
- 案例:Oracle dul数据挖掘 磁盘损坏dul提取数据文件中表的数据及l
- 代码中的输入输出(重定向、文件流C/C++)
- json 的简单应用
- 利用计算机提高数学课堂教学,计算机技术在数学课堂教学中的应用微探
- mysql5.6.4m7 linux安装_mysql-5.6.4-m7installinlinux
- 桌面上的计算机图标一直被选定,常见电脑桌面图标问题十则
- 使用ViewModel模式简化WPF TreeView
- 2021李宏毅机器学习课程笔记——Domain Adaptation
- 员工转正申请书_网站建设人员的转正的申请书
- ISO27145协议解析
- 相似图片搜索——感知哈希算法
- 怎么退出磁贴桌面回到传统桌面?
- mysql局域网访问6_mysql局域网访问
- xp查计算机用户名,XP系统MAC地址查询 XP怎么查看电脑MAC地址?-192路由网
- vue echarts 实现速度的那种进度蓄力效果
- 浏览器打不开网页 服务器停止响应怎么办,浏览器打不开未响应怎么办
- ubuntu 刷新频率 如何查看_Ubuntu分辨率和刷新频率设置
- golang的timer的一些坑
热门文章
- 2012蓝桥杯【初赛试题】 取球游戏
- 摄像头bug查找工作总结
- 图的遍历(广度优先遍历)- 数据结构和算法61
- 令人魂牵梦绕的香格里拉
- 微信小程序学习笔记-(11)-仿糗事百科
- Cookie、LocalStorage 与 SessionStorage的区别
- c盘哪些文件可以删除_原来C盘可以删除这5个文件,难怪你的电脑越来越卡
- string对象的创建、截取和拼接_java基础面试题-String深入理解
- Java库转oc,(java转行oc)什么是block,用java来解释oc中的block
- mysql中文乱码过滤_记一次mysql中文字符乱码的问题排查