axios cookie问题和表单上传问题探究

自从入了 Vue 之后，一直在用 axios 这个库来做一些异步请求。最近在跨域、cookie 以及表单上传这几个方面遇到了点小问题，做个简单探究和总结。本文将涉及使用 axios 在跨域情况下成功得到响应报文中的内容以及让 cookie 成功设置的解决办法；使用 axios 上传表单数据时候遇到的小问题。

一、同域 cookie 问题

首先来看一个同域情况下的cookie例子清楚整个流程以便后面对跨域情况能够更好地阐述。服务端的代码如下，访问 /get-cookie 接口的时候，通过 session 随便设置字段 time，使得响应报文中带有 set-cookie 字段，在浏览器段设置 cookie，这个 cookie 的内容即相应的 sessionId。然后访问 /test-cookie 可以判断浏览器端的 cookie 是否设置成功，如果设置成功，那么浏览器发送的报文会自动带上 cookie 字段，服务器也就可以根据 cookie 找到对应的 session。如果设置失败，那么浏览器发送的报文不会带上 cookie 字段，服务器也就无法找到对应的 session，从而返回 error。

const express = require('express')
const path = require('path')
const cookieParser = require('cookie-parser')
const session = require('express-session')
const FileStore = require('session-file-store')(session)

let app = express()

app.use('/static', express.static(path.join(__dirname, './static')))
app.use(cookieParser())
app.use(session({
  store: new FileStore(),
  secret: 'hongchh',
  resave: false,
  saveUninitialized: false
}))

app.use('/get-cookie', (req, res) => {
  req.session.time = Date.now()
  res.json({ result: 'ok' })
})

app.use('/test-cookie', (req, res) => {
  if (req.session.time) {
    console.log('session.time: ' + req.session.time)
    console.log(req.cookies)
    res.json({ result: 'ok' })
  } else {
    res.json({ result: 'error' })
  }
})

app.listen(8000)

console.log('http://localhost:8000/static/index.html')

前端的代码如下，前端只有两个按钮，触发点击事件分别可以调用两个接口。

window.onload = function () {
   
  'usr strict'

  document.getElementById('get-cookie').addEventListener('click', getCookie, false)
  document.getElementById('test-cookie').addEventListener('click', testCookie, false)

  var getResult = document.getElementById('get-result')
  var testResult = document.getElementById('test-result