0. 系列文章

项目源码请猛戳这里!!!

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(三) ...

随机推荐

github仓库添加MIT许可
俩种方法 1.新建仓库直接在选择添加即可如下图: 2.为已创建仓库后添加MIT协议直接在给工程根目录添加LICENSE文件提交即可,内容是 MIT License Copyright (c) 年份 ...
python编程基础之三十二
成员方法:成员方法就是一个函数,只是作用域在类内,并且第一个参数必须是self,self代表当前对象, class Dog(object): def bark(self): #成员方法,第一个参数必须 ...
navicat for mysql ；连接数据库报错1251，解决办法。
转载改密码方式:用管理员身份打开cmd mysql -uroot -p(输入密码) 进入mysql执行下面三个命令 use mysql: ALTER USER 'root'@' ...
从零起步系统入门Python爬虫工程师 ✌✌
从零起步系统入门Python爬虫工程师 (一个人学习或许会很枯燥,但是寻找更多志同道合的朋友一起,学习将会变得更加有意义✌✌) 大数据时代,python爬虫工程师人才猛增,本课程专为爬虫工程师打造, ...
top命令之性能分析
top命令详解当前时间20:27:12 当前系统运行时间3:18秒 1个用户系统负载平均长度为0.00,0.00,0.00(分别为1分钟.5分钟.15分钟前到现在的平均值) 第二行为进程 ...
介绍ArcGIS中各种数据的打开方法——mxd（地图文档）
1.加载地图文档在ArcGIS中,以mxd作为扩展名的文件叫地图文档. 地图文档中只是包含图层的引用,即存储当前地图的图层路径.符号.状态.修饰等信息,并不存储真实的数据层. ArcGIS Map中 ...
python犯傻之题目解答思路比较与反思
1.题目: 企业发放的奖金根据利润提成.利润(I)低于或等于10万元时,奖金可提10%: 利润高于10万元,低于20万元时,低于10万元的部分按10%提成,高于10万元的部分,可提成7.5%: 20万 ...
Canvas动画基础之碰撞检测
在Canvas中进行碰撞检测,大家往往直接采用游戏引擎(Cocos2d-JS.Egret)或物理引擎(Box2D)内置的碰撞检测功能,好奇的你有思考过它们的内部运行机制吗?下面将针对基本的碰撞检测技术 ...
[BZOJ3029] 守卫者的挑战
Description 打开了黑魔法师Vani的大门,队员们在迷宫般的路上漫无目的地搜寻着关押applepi的监狱的所在地.突然,眼前一道亮光闪过.“我,Nizem,是黑魔法圣殿的守卫者.如果你能通过 ...
[JZOJ5817] 【NOIP提高A组模拟2018.8.15】抄代码
Description J 君是机房的红太阳,每次模拟她总是 AK 虐场.然而在 NOIP2117 中,居然出现了另一位 AK 的选手 C 君! 这引起了组委会的怀疑,组委会认为 C 君有抄袭 J 君 ...

使用Typescript重构axios(二十三)——添加withCredentials属性