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】JDK安装及环境变量配置
第一步:下载所需jdk(本次下载Win64位 java1.8...版本) 第二步:点击文件安装,直接下一步到底,成功安装,点击关闭. 第三步:安装完JDK后配置环境变量计算机→属性→高级系统设置→ ...
hihoCode 1075 : 开锁魔法III
时间限制:6000ms 单点时限:1000ms 内存限制:256MB 描述一日,崔克茜来到小马镇表演魔法. 其中有一个节目是开锁咒:舞台上有 n 个盒子,每个盒子中有一把钥匙,对于每个盒子而言有且仅 ...
Vue-CLI项目-axios模块前后端交互(类似ajax提交)
08.31自我总结 Vue-CLI项目-axios前后端交互一.模块的安装 npm install axios --save #--save可以不用写二.配置main.js import axio ...
FLask中蓝图(用于分文件)
一,不使用蓝图,自己分文件目录结构 -templates -views -__init__.py -user.py -order.py -app.py app.py from views impor ...
NDN helper 学习记录
1.StackHelper 主要用于在请求的节点上安装ndnSIM网络堆栈, 提供一种简单的方法来配置NDN模拟的几个重要参数.(官方解释) 其实就是给结点装上堆栈方法: 全部结点一次性安装(比较常 ...
详解AJAX工作原理以及实例讲解（通俗易懂）
什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味 ...
POJ 1276 Cash Machine(多重背包的二进制优化)
题目网址:http://poj.org/problem?id=1276 思路: 很明显是多重背包,把总金额看作是背包的容量. 刚开始是想把单个金额当做一个物品,用三层循环来转换成01背包来做.T了… ...
python中使用logging将日志写入文件或输出到控制台
import logging import os class Logger: def __init__(self, name=__name__): # 创建一个loggger self.__name ...
Jenkins指定tag发布到k8s环境
Jenkins指定tag发布到k8s环境 1.Jenkins配置一个Pipeline 工程首先要安装插件:https://www.cnblogs.com/Dev0ps/p/9125232.html ...
typescript 入门教程一
##### 从今天开始,持续更新typescript入门教程系列.... 目前ts越来越火,主流的前端框架,好比*angular,vue 3*均是采用ts来编写,所有很多公司的项目都是用**ts**来 ...

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