Ajax请求携带Cookie
xhr
先来了解下xhr
xhr,全称为XMLHttpRequest
,用于与服务器交互数据,是ajax功能实现所依赖的对象,jquery中的ajax就是对 xhr的封装。
还有axios和fetch请求都属于xhr请求,都是基于标准 Promise 实现。
ajax cookie跨域处理
简单说说cookie
和session
的关系
不少朋友搞的不是特别清楚,一知半解的,在这里阐述下
cookie存储于客户端浏览器,默认生命周期跟随浏览器,浏览器关闭,cookie就会失效,tab标签也关闭了并不会失效
session存储于服务器,比如tomcat
,默认失效时间30分钟,当然也可以通过redis来存储。
这里登录做个示例说明
未登录状态下,匿名用户通过客户端浏览器请求数据,都是无状态的(服务端不知道你是谁
)
用户进行请求登录操作,登录成功,服务端会在response header里加一个Set-Cookie
写入浏览器中。
之后客户端在以后的请求中,会自动在请求头中携带此cookie。
cookie有一些属性,比如
- 失效时间(跟随浏览器,但是也可以进行持久化。跟localstorage和sessionstorage类似)
- httponly(设置为true的话,客户端在控制台就获取不到)
- path(默认为/)
同源情况下,比如是前后端不分离的项目,xhr(ajax)请求没有任何问题,但是会发现,不支持cookie跨域
非同源情况下,xhr(ajax)请求服务端处理了,但是不会进行响应,会显示如下错误。也就是出现了跨域问题。
所以,解决接口跨域和解决xhr cookie跨域,是不一样的。
解决cookie跨域需要客户端和服务端都做处理,主要操作在服务端。
客户端
ajax请求添加该参数即可
xhrFields: {
withCredentials: true
},
同理axios也是如此
axios.defaults.withCredentials = true
注意,修改cookie值直接document修改即可,请求的时候浏览器会自动携带的。 不需要在header中添加cookie头,这样做是没有任何意义的。比如
headers: {
'Cookie': 'JSESSIONID=6FA9E27092EC212E439851D4831AADE6'
}
服务端
添加允许跨域操作,此处表示Spring
框架,直接用@CrossOrigin
处理即可(最为简单)
@CrossOrigin(value = "*", allowCredentials = "true")
服务端设置跨域的几种方式
方式一 重写addCorsMappings方法
@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
.maxAge(3600)
.allowCredentials(true);
}
}
方式二 对单个接口处理
// 需要设置前端请求的url。不支持*
responses.setHeader("Access-Control-Allow-Origin", "http://localhost:63342");
// 设置允许跨域的方法
responses.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
// 之后需要设置允许cookie跨域
response.setHeader("Access-Control-Allow-Credentials", "true");
方式三 @CrossOrigin注解
@CrossOrigin(value = "*", allowCredentials = "true")
方式四 nginx配置添加允许跨域请求
server {
listen 5566;
server_name localhost;
# 指定客户端的请求地址
add_header 'Access-Control-Allow-Origin' 'http://localhost:63342';
add_header 'Access-Control-Allow-Credentials' true;
add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept, Authorization,token,r,sign,time";
location / {
if ($request_method = OPTIONS ) {
return 200;
}
proxy_method get;
proxy_set_header X-real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://127.0.0.1:5005;
proxy_set_header Host $host;
}
}
OK,完美解决!
- jQuery.unique引发一个血案
- TCP/IP(二)物理层详解
- JavaScript中的日期处理注意事项
- 概率论11 协方差与相关系数
- Mybatis传多个参数(三种解决方案)
- 语义化HTML:i、b、em和strong标签
- JSON入门指南--服务端处理JSON
- 纸上谈兵: 图 (graph)
- 纸上谈兵: 拓扑排序
- MyBatis Generator自动创建代码
- Maven(六)之依赖管理
- 细说log4j
- SEVERE: Error configuring application listener of class org.springframework.web.context.ContextLoade
- TCP/IP(一)之开启计算机网络之路
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- pyPI: Python计算热带气旋潜在强度(Potential Intensity, 数据+代码)
- CVE-2019-0808 从空指针解引用到权限提升
- 打卡群刷题总结0926——零钱兑换
- 这样写的代码,都是垃圾......
- 打卡群刷题总结0928——整数拆分
- 面试官最爱问的 11道 Redis 面试题,我替你整理好了
- 打卡群刷题总结0929——计算各个位数不同的数字个数
- codeforces 1423K(数学+差分数组预处理)
- 电影大片里的代码究竟有多高级?
- 打卡群刷题总结0930——最大整除子集
- 机器学习中的常用编码方式(一)
- leetcode题目之1、2---两数相加
- pyplot做PR-curve
- Go - flag:命令行flags解析
- 走进Network Namespace学会容器网络调试