在谷歌浏览器中请求获取不到cookie问题之一(谷歌安全策略)
场景
前端使用 axios 请求,项目地址:http://192.168.8.1:5173
import axios from 'axios'
const request = axios.create({
baseURL: 'http://127.0.0.1:3001/',
timeout: 60000,
headers: {
['Content-Type']: 'application/x-www-form-urlencoded'
},
withCredentials: true
})
request.interceptors.request.use(
(req) => {
return req
},
(err) => {
return err
}
)
request.interceptors.response.use(
(res) => {
return res
},
(err) => {
return err.response
}
)
export default request
后端使用 koa + cors中间件 + koa-session中间件,配置了跨域,接口地址:127.0.0.1:3001
const Koa = require('koa')
const session = require('koa-session')
const cors = require('@koa/cors')
const app = new Koa()
app.use(
cors({
origin: 'http://192.168.8.1:5173',
allowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
allowHeaders: ['Content-Type', 'Authorization', 'Accept'],
credentials: true
})
)
app.keys = ['test']
const CONFIG = {
key: 'koa.sess1',
maxAge: 2 * 60 * 60 * 1000,
secure: false
}
app.use(session(CONFIG, app))
app.use((ctx) => {
if (ctx.request.url === '/set') {
ctx.session.user = 'test666'
ctx.body = 'ok'
} else if (ctx.request.url === '/get') {
console.log(ctx.session.user)
ctx.body = ctx.session.user
}
})
app.listen(3001, () => {
console.log('start server 3001')
})
问题
请求成功后,后端设置cookie成功,但前端浏览器响应中携带的cookie后面会有个(三角感叹号),后端也无法获取cookie(后端获取到的cookie是undefined)
解决
把前端项目地址改为 :http://127.0.0.1:5173
(也可以前端做代理访问)
后端修改跨域配置为前端新地址
const Koa = require('koa')
const session = require('koa-session')
const cors = require('@koa/cors')
const app = new Koa()
app.use(
cors({
origin: 'http://127.0.0.1:5173',
allowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
allowHeaders: ['Content-Type', 'Authorization', 'Accept'],
credentials: true
})
)
// ...
也就是项目ip与请求ip保持一致(端口可以不用),这时浏览器请求响应后面的感叹号就会消失,后端就能获取到设置的cookie;
注意:
修改后要清除浏览器缓存,再刷新查看;否则很容易出现误导(吃过亏)
总结
此问题在360极速浏览器中测试时正常,在谷歌浏览器测试时才出现,后查阅资料了解谷歌自51版本后改了cookie安全策略;
以上问题为本地开发时出现,线上暂未部署测试