使用Typescript重构axios(二十三)——添加withCredentials属性
0. 系列文章
1.使用Typescript重构axios(一)——写在最前面
2.使用Typescript重构axios(二)——项目起手,跑通流程
3.使用Typescript重构axios(三)——实现基础功能:处理get请求url参数
4.使用Typescript重构axios(四)——实现基础功能:处理post请求参数
5.使用Typescript重构axios(五)——实现基础功能:处理请求的header
6.使用Typescript重构axios(六)——实现基础功能:获取响应数据
7.使用Typescript重构axios(七)——实现基础功能:处理响应header
8.使用Typescript重构axios(八)——实现基础功能:处理响应data
9.使用Typescript重构axios(九)——异常处理:基础版
10.使用Typescript重构axios(十)——异常处理:增强版
11.使用Typescript重构axios(十一)——接口扩展
12.使用Typescript重构axios(十二)——增加参数
13.使用Typescript重构axios(十三)——让响应数据支持泛型
14.使用Typescript重构axios(十四)——实现拦截器
15.使用Typescript重构axios(十五)——默认配置
16.使用Typescript重构axios(十六)——请求和响应数据配置化
17.使用Typescript重构axios(十七)——增加axios.create
18.使用Typescript重构axios(十八)——请求取消功能:总体思路
19.使用Typescript重构axios(十九)——请求取消功能:实现第二种使用方式
20.使用Typescript重构axios(二十)——请求取消功能:实现第一种使用方式
21.使用Typescript重构axios(二十一)——请求取消功能:添加axios.isCancel接口
22.使用Typescript重构axios(二十二)——请求取消功能:收尾
23.使用Typescript重构axios(二十三)——添加withCredentials属性
24.使用Typescript重构axios(二十四)——防御XSRF攻击
25.使用Typescript重构axios(二十五)——文件上传下载进度监控
26.使用Typescript重构axios(二十六)——添加HTTP授权auth属性
27.使用Typescript重构axios(二十七)——添加请求状态码合法性校验
28.使用Typescript重构axios(二十八)——自定义序列化请求参数
29.使用Typescript重构axios(二十九)——添加baseURL
30.使用Typescript重构axios(三十)——添加axios.getUri方法
31.使用Typescript重构axios(三十一)——添加axios.all和axios.spread方法
32.使用Typescript重构axios(三十二)——写在最后面(总结)
1. 前言
在实际项目开发中,前端代码和后端代码往往是跑在两个不同的端口上,前端的请求要访问后端的api
,就成了跨端口请求,也就是跨域请求。而浏览器为了安全起见,会根据同源策略禁止这种跨域请求。在同域的情况下,我们发送请求会默认携带当前域下的 cookie
,但是在跨域的情况下,由于浏览器的限制,默认是不会携带请求域下的 cookie
,而我们通常请求中是需要携带cookie
的,这就需要在XMLHttpRequest
对象上配置withCredentials
属性,将其设置为true
即可,官方的axios
在请求配置对象中为我们提供了设置这一属性的选项,接下来,我们也要在我们的axios
中提供这一选项。
添加这一选项非常简单,我们只需在请求配置对象config
中加上该属性,然后在发送请求时判断是否配置了该属性,如果配置了我们就在XMLHttpRequest
对象上将该属性进行配置即可。
OK,接下来,我们就来实现它。
2. 修改 AxiosRequestConfig
给请求配置对象config
中添加withCredentials
属性之前,我们需要先在src/types/index.ts
中的配置对象的接口类型定义AxiosRequestConfig
上添加该属性的定义,如下:
export interface AxiosRequestConfig {
// 新增
withCredentials?: boolean;
}
3. 添加请求判断逻辑
接口定义好之后,我们只需在发送请求之前,判断用户是否配置了该属性,如果配置了,就把配置的属性值添加到XMLHttpRequest
对象上即可,我们修改src/core.xhr.ts
中的xhr
函数,如下:
const { /*...*/ withCredentials } = config
if (withCredentials) {
request.withCredentials = true
}
OK,这样withCredentials
属性配置选项就添加好了,接下来,我们就编写demo
来看看效果。
4. demo编写
在 examples
目录下创建 addWithCredentials
目录,在 addWithCredentials
目录下创建 index.html
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>addWithCredentials demo</title>
</head>
<body>
<script src="/__build__/addWithCredentials.js"></script>
</body>
</html>
接着再创建 app.ts
作为入口文件:
import axios from "../../src/axios";
axios.post("http://192.168.1.2:3000/api/addWithCredentials", {}).then(res => {
console.log(res);
});
axios.post("http://192.168.1.2:3000/api/addWithCredentials", {}, {
withCredentials: true
}).then(res => {
console.log(res);
});
在本demo
中,我们发送两个请求,一个请求配置了withCredentials
属性,一个没有。理想情况下,没有配置withCredentials
属性的请求就携带不了cookie
,自然也就接收不到服务端返回的cookie
内容;而配置了withCredentials
属性的请求可以携带cookie
,那么它就可以收到服务端返回的cookie
内容。后面我们可以通过结果来验证现在的猜测。
接着在 server/server.js
添加新的接口路由:
// 添加withCredentials
const cookieParser = require("cookie-parser");
app.use(cookieParser());
const cors = {
"Access-Control-Allow-Origin": "http://192.168.1.2:8000",
"Access-Control-Allow-Credentials": true,
"Access-Control-Allow-Methods": "POST, GET, PUT, DELETE, OPTIONS",
"Access-Control-Allow-Headers": "Content-Type"
};
router.post("/api/addWithCredentials", function(req, res) {
res.set(cors);
res.json(req.cookies);
});
router.options("/api/addWithCredentials", function(req, res) {
res.set(cors);
res.end();
});
此处切记一定要配置两个路由接口,除了post
还有加一个options
,这是因为cors
跨域对于非简单请求浏览器会先发送一个options
类型的请求来预检请求,具体原因请看这里!
这里需要安装一下 cookie-parser
插件,用于请求发送的 cookie
。
另外,为了形式跨域请求,我们还需要把webpack.config.js
文件中配置的webpack
跨域代理配置注释掉,如下:
devServer: {
noInfo: true,
overlay: true,
open: true
// proxy: { // 配置跨域
// '/api/': {
// target: 'http://192.168.1.2:3000',
// ws: true,
// changOrigin: true
// },
// }
}
最后在根目录下的index.html
中加上启动该demo
的入口:
<li><a href="examples/addWithCredentials">addWithCredentials</a></li>
OK,我们在命令行中执行:
# 同时开启客户端和服务端
npm run server | npm start
接着我们打开 chrome
浏览器,访问 http://localhost:8000/ 即可访问我们的 demo
了,我们点击 addWithCredentials
,通过F12
的 network
部分我们可以看到:两条请求已经正常发出了,但是两个请求返回的data
都为空,这是因为我们还没有写cookie
内容呢,按照下图中的方式写入cookie
后,在刷新页面发送请求,我们就可以看到没有配置withCredentials
属性的请求返回的data
仍旧为空{}
,而配置了withCredentials
属性的请求返回的data
已经有携带的cookie
内容了。
OK,添加withCredentials
属性的功能我们就已经实现了。
(完)
使用Typescript重构axios(二十三)——添加withCredentials属性的更多相关文章
- 使用Typescript重构axios(二十七)——添加请求状态码合法性校验
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
- 使用Typescript重构axios(二十一)——请求取消功能:添加axios.isCancel接口
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
- 使用Typescript重构axios(二十六)——添加HTTP授权auth属性
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
- 使用Typescript重构axios(二十九)——添加baseURL
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
- 使用Typescript重构axios(二)——项目起手,跑通流程
0.系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三)- ...
- 使用Typescript重构axios(二十)——请求取消功能:实现第一种使用方式
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
- 使用Typescript重构axios(二十二)——请求取消功能:收尾
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
- 使用Typescript重构axios(二十四)——防御XSRF攻击
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
- 使用Typescript重构axios(二十五)——文件上传下载进度监控
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
随机推荐
- .Net Core下使用HtmlAgilityPack解析采集互联网数据
HtmlAgilityPack应该算是.Net下最好用的html解析库了. 因为最近帮朋友采集一些数据,在nuget里面搜索了好几个库,最后决定就用HtmlAgilityPack.并简单的记录下使用的 ...
- javascript随机点名--案例
主要知识点涉及if选择结构判断语句.数组的定义.定时器.清除定时器.日期对象的使用. 1.HTML结构 <!DOCTYPE html> <html> <head> ...
- 记一次共享内存/dev/shm 小于memory_target 引发的客户DB 宕机问题
1> 记一次共享内存/dev/shm 小于memory_target 引发的客户DB 宕机问题(处理心得)
- centos8安装图解
CentOS 8 的新特性 DNF 成为了默认的软件包管理器,同时 yum 仍然是可用的 使用网络管理器(nmcli 和 nmtui)进行网络配置,移除了网络脚本 使用 Podman 进行容器管理 引 ...
- [ZJOI2006]物流运输trans
Description 物流公司要把一批货物从码头A运到码头B.由于货物量比较大,需要n天才能运完.货物运输过程中一般要转停好几个码头.物流公司通常会设计一条固定的运输路线,以便对整个运输过程实施严格 ...
- Java学习笔记之基础语法(数组)
数组 数组概述:是具有相同数据类型的数据的集合 数组的定义:数据类型 数组名 [] 数组特点: 1,数组是引用数据类型. 2,数组值用大括号,元素之间用逗号隔开,元素的个数是0-N个 3,数组长度是固 ...
- Hibernate HQL注入与防御(ctf实例)
遇到一个hql注入ctf题 这里总结下java中Hibernate HQL的注入问题. 0x01 关于HQL注入 Hibernate是一种ORM框架,用来映射与tables相关的类定义(代码) ...
- windows系统安全日志取证工具
0x01 关于日志 Windows安全事件日志中详细记录了是谁在什么时候通过什么手段登录到系统或者注销了登录,通过分析该日志可以详细了解服务器的安全情况以及必要时的取证工作. 0x02 查看日志 传统 ...
- PHP array_reduce
1.函数的作用:用函数迭代数组的所有元素 2.函数的参数: @params array $array 用于迭代的数组 @params callable $callback 迭代的函数 @ ...
- mysqldump导出 timestamp类型数据 时区偏差8小时
1 出现原因 1.1 查看机器时区和MySQL的时区 #查看linux的机器时区: [root@mysql-150 ~]# date -R Wed, 23 Oct 2019 14:10:04 +080 ...