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请求时无危险性且认可 ...
最新文章
- Linux shell 学习笔记(16)— shell 入门总结
- adc采样的值跳动_嵌入式er必知:模数采样知多少(最全总结)
- 【PC工具】虚拟串口工具Configure Virtual Serial Port Driver6.9汉化版
- win7 一些快捷系统工具命令
- C# winfrom打印技术初探
- 【线性回归】面向新手的基础知识
- arm板telnetd为什么运行不了_一种基于ARM的嵌入式系统开发的方案详细讲解
- Apollo进阶课程 ① | 带你纵览无人车
- FlashPaper安装及使用方法
- .NET C#研发的授权工具
- Mac OSX上安装Python的方法
- (二)PowerLink理论知识
- 网络图的绘制方法详细讲解
- 神经网络中常用的误差平方和损失函数是什么
- 小米硬盘路由器服务器,随手分享攻略 篇九:小米路由器更换10T硬盘 —— 小白教程...
- 使用vscode编写html代码
- [ACNOI2022]《普林斯普的荣光》
- 迅雷链:DPoA 与 VRF
- 万亿蚂蚁的高光与隐忧
- DeepCachNet A Proactive Caching Framework Based on Deep Learning in Cellular Networks论文阅读
热门文章
- div+css中的为什么要设置浮动属性,浮动完了为什么又要清除浮动
- Android 模拟器中sd卡的创建 和文件的上传
- CentOS 6.2 mini安装桌面环境
- 使用JDBC编程的问题总结
- c++11新特性_c++11(7)新特性之继承构造函数
- wifi定位算法 java_机器学习在滴滴网络定位中的探索和实践
- 最快的 java 图像_java – 最快的性能过滤图像
- unity描边发光shader_Unity Shader 边缘高亮、描边
- oracle通信通道的文件结尾_oracle里执行full join 报通信通道的文件结尾问题
- 充一次电使用一年的手机_手机充一次电用一年?现有技术难实现