前端本地开发同时起多个localhost服务,cookie里token被覆盖问题

2023-11-17 11:09:31 浏览数 (2)

同时开发多个前端项目,都是运行在 localhost 下的不同端口上:localhost:8080、localhost:8081、localhost:8082...一去登录其中一个端,其他端的登录态都失效了。

项目里的登录态 token 都是存在 cookie 里的,代码如下:

代码语言:javascript复制
import axios from 'axios'

// 添加请求拦截器
axios.interceptors.request.use(config => {
  // 请求头添加登录验证
  config.headers.Token = cookie('token') || ''
  return config
}, error => {
  return Promise.reject(error)
})

token被覆盖的原因

cookie 是不提供端口隔离的,不同的端口下的服务 cookie 是可以相互读写的,所以登录其中一个端时,其他端口下的所有服务的 token 都会被新的替换了

解决方案

  1. 开不同的浏览器(chrome、firefox、edge),注意相同浏览器开不同的窗口也是不行的,要用不同的浏览器
  2. 一般本地运行的项目会有两个地址,像下面这样,如果两个项目可以一个用localhost(127.0.0.1 这个也可以用,不会受到 localhost 里的 token 影响),一个用下面的Network那个ip地址
代码语言:javascript复制
 App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.2.123:8080/

浏览器缓存作用域

  • localStorage:协议、主机名以及端口
  • sessionStorage:协议、主机名以及端口,还要加上浏览器标签页
  • cookie:范围仅限于当前主机名上的所有URL - 而不是绑定到端口或协议信息,domain本身以及domain下的所有子域名,需注意cookie不提供端口隔离,即同一服务器的下运行的不同端口之间的服务是可以相互读写cookie的

注意:相同浏览器下,并且是同源窗口(协议、域名、端口一致),即使不同页面也是可以共享localStorage和Cookies值,但是不能共享sessionStorage

0 人点赞