withCredentials

需求分析

有些时候我们会发一些跨域请求，比如 http://domain-a.com 站点发送一个 http://api.domain-b.com/get 的请求，默认情况下，浏览器会根据同源策略限制这种跨域请求，但是可以通过 CORS 技术解决跨域问题。

在同域的情况下，我们发送请求会默认携带当前域下的 cookie，但是在跨域的情况下，默认是不会携带请求域下的 cookie 的，比如 http://domain-a.com 站点发送一个 http://api.domain-b.com/get 的请求，默认是不会携带 api.domain-b.com 域下的 cookie，如果我们想携带（很多情况下是需要的），只需要设置请求的 xhr 对象的 withCredentials 为 true 即可。

代码实现

先修改 AxiosRequestConfig 的类型定义。

types/index.ts：

  1. export interface AxiosRequestConfig {
  2.   // ...
  3.   withCredentials?: boolean
  4. }

然后修改请求发送前的逻辑。

core/xhr.ts：

  1. const { /*...*/ withCredentials } = config
  3. if (withCredentials) {
  4.   request.withCredentials = true
  5. }

demo 编写

在 examples 目录下创建 more 目录，在 cancel 目录下创建 index.html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>More example</title>
  6.   </head>
  7.   <body>
  8.     <script src="/__build__/more.js"></script>
  9.   </body>
  10. </html>

接着创建 app.ts 作为入口文件：

  1. import axios from '../../src/index'
  3. document.cookie = 'a=b'
  5. axios.get('/more/get').then(res => {
  6.   console.log(res)
  7. })
  9. axios.post('http://127.0.0.1:8088/more/server2', { }, {
  10.   withCredentials: true
  11. }).then(res => {
  12.   console.log(res)
  13. })

这次我们除了给 server.js 去配置了接口路由，还创建了 server2.js，起了一个跨域的服务。

  1. const express = require('express')
  2. const bodyParser = require('body-parser')
  3. const cookieParser = require('cookie-parser')
  5. const app = express()
  7. app.use(bodyParser.json())
  8. app.use(bodyParser.urlencoded({ extended: true }))
  9. app.use(cookieParser())
  11. const router = express.Router()
  13. const cors = {
  14.   'Access-Control-Allow-Origin': 'http://localhost:8080',
  15.   'Access-Control-Allow-Credentials': true,
  16.   'Access-Control-Allow-Methods': 'POST, GET, PUT, DELETE, OPTIONS',
  17.   'Access-Control-Allow-Headers': 'Content-Type'
  18. }
  20. router.post('/more/server2', function(req, res) {
  21.   res.set(cors)
  22.   res.json(req.cookies)
  23. })
  25. router.options('/more/server2', function(req, res) {
  26.   res.set(cors)
  27.   res.end()
  28. })
  30. app.use(router)
  32. const port = 8088
  33. module.exports = app.listen(port)

这里需要安装一下 cookie-parser 插件，用于请求发送的 cookie。

通过 demo 演示我们可以发现，对于同域请求，会携带 cookie，而对于跨域请求，只有我们配置了 withCredentials 为 true，才会携带 cookie。

至此我们的 withCredentials feature 开发完毕，下一节课我们来实现 axios 对 XSRF 的防御功能。