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

随机推荐

node 利用命令行交互生成相应模板
目录 readline 实现使用process实现使用 inquirer 调用的生成模板方法 (generator 方法) 创建时间:2019-10-15 测试环境:win10 node-v10. ...
前端css杂记
1em等于16px,页面默认是16px,一个字宽高都等于16px; 当行内元素display:inline的元素设置float:left浮动后,display值也被设置成block;总结:无论行内元素 ...
Django2.1.3 urls.py path模块配置
learning_log/urls.py learning_logs/urls.py django2.0和1.x的区别是非常明显的,2.0开始使用path和re_path代替原来的url,而且用法有了 ...
动态扩容lvm逻辑卷的操作记录
在进行动态扩容LVM逻辑卷的之前,先看这篇文章:https://www.cnblogs.com/huhyoung/p/9689776.html.以下是我实操记录. 在上班期间,测试经理突然找我,能不能 ...
django html母版
08.12自我总结 django母版一.母版写的格式在需要导入的地方写 {% block 名字定义 %} {% endblock %} 二.导入模板 {% extends 'FUCK.html' ...
angular之跨域
一.什么是跨域? 跨域是指一个域下的文档或者脚本去请求另一个域下的资源.(广义) 广义的跨域: 1.资源跳转:链接跳转.重定向.表单提交. 2.资源嵌入:<link>.<script ...
HTML DIV充满整个屏幕
<!DOCTYPE html> <html> <head> <title>A Little Game!</title> <meta c ...
CSS中重要的BFC
CSS中有个重要的概念BFC,搞懂BFC可以让我们理解CSS中某些原本看似诡异的地方. 简介在解释BFC之前,先说一下文档流.我们常说的文档流其实分为定位流.浮动流.普通流三种.而普通流其实就是指B ...
[LUOGU1868] 饥饿的奶牛 - dp二分
题目描述有一条奶牛冲出了围栏,来到了一处圣地(对于奶牛来说),上面用牛语写着一段文字. 现用汉语翻译为: 有N个区间,每个区间x,y表示提供的x~y共y-x+1堆优质牧草.你可以选择任意区间但不能有 ...
就改了get，却不让我set？——Java内省机制的神奇行为举止一例
[相关类库]org.apache.commons.beanutils.BeanUtils,提供对Java反射和自省API的包装,其中底层使用到了Java的内省方法.[内省的一般应用形式]通过类Intr ...

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