在谷歌瀏覽器中請求獲取不到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安全策略；

以上問題為本地開發時出現，線上暫未部署測試