自从入了 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