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

随机推荐

【Java】后台将文件上传至远程服务器
问题:由于系统在局域网(能访问外网)内,但外网无法请求局域网内服务器文件和进行处理文件. 解决:建立文件服务器,用于存储文件及外网调用. 客户端(文件上传): package cn.hkwl.lm.u ...
SpringBoot系列：Spring Boot使用模板引擎JSP
一.Java模板引擎模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档. 在jav ...
Hbase入门(五)——客户端（Java，Shell，Thrift，Rest，MR，WebUI）
Hbase的客户端有原生java客户端,Hbase Shell,Thrift,Rest,Mapreduce,WebUI等等. 下面是这几种客户端的常见用法. 一.原生Java客户端原生java客户端 ...
Reportviewer拖到winform不显示控件
Vs2017使用的是rdlc Microsoft.ReportingServices.ReportViewerControl.Winforms.140.340.80版本的,但是NuGet默认安装的是最 ...
Unreal Engine 4 系列教程 Part 2：蓝图教程
.katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...
【RT-Thread】线程的基本知识
什么是线程? 人们在生活中处理复杂问题时,惯用的方法就是分而治之,即把一个大问题分解成多个相对简单.比较容易解决的小问题,小问题逐个被解决了,大问题也就随之解决了.同样,在设计一个较为复杂的应用程序时 ...
C、C++的Makefile模板
目录 Makefile模板用法编译C程序编译C++程序其他 Tips Makefile模板 CC = gcc LD = $(CC) TARGET = $(notdir $(CURDIR)) S ...
CSS中各种布局的背后(*FC)
CSS中各种布局的背后,实质上是各种*FC的组合.CSS2.1中只有BFC和IFC,CSS3 中还增加了FFC和GFC. 盒模型(BoxModel) 上图为W3C标准盒模型,另外还有一种IE盒模型(I ...
odoo联调
odoo联调(剑飞花 373500710) 1.准备工作 1.1.参考文章“odoo8.0+PyCharm4.5开发环境配置”配置好odoo开发环境 1.2.下载Chrome浏览器,安装. 1.3.下 ...
百万年薪python之路 -- JS的BOM与DOM对象
BOM对象 location对象 location.href 获取URL location.href="URL" // 跳转到指定页面 location.reload() 重新加载 ...

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