首页

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

lipiwang 2024-10-21 08:56 12 浏览 0 评论

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

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

import axios from 'axios'

// 添加请求拦截器
axios.interceptors.request.use(config => {
  // 请求头添加登录验证
  config.headers.Token = cookie('token') || 'null' // 防止不传，被网关拦截，接口401
  return config
}, error => {
  return Promise.reject(error)
})

token被覆盖的原因

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

解决方案

开不同的浏览器（chrome、firefox、edge），注意相同浏览器开不同的窗口也是不行的，要用不同的浏览器
一般本地运行的项目会有两个地址，像下面这样，如果两个项目可以一个用localhost（127.0.0.1 这个也可以用，不会受到 localhost 里的 token 影响)，一个用下面的Network那个ip地址

 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

localhost

上一篇：Servlet技术分享 servlet 教程
下一篇：mac下mysql，连接出现Access denied for user 'root'@'localhost'

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

token被覆盖的原因

解决方案

浏览器缓存作用域

注意

相关推荐

取消回复欢迎你发表评论:

深圳尚学堂Java面试习题集(六)

MySQL 日期操作函数大全:解锁时间处理的奥秘

Android 工程师必知必会的“AOP知识”

工作3年出去面试Java，被鄙视spring的接口有哪些都不清楚

SpringBoot-24-默认Json框架jackson详解

互联网应用高并发中间件:RabbitMQ的安装和配置

SQLMAP注入参数-其他参数介绍 sqlmap怎么对一个注入点注入

Word中 ↑↓← → ↘↙这些箭头怎么打出来

从零开始:一步一步教你下载、安装和配置Oracle数据库

我和你一起学鸿蒙(十)——组件扩展

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

token被覆盖的原因

解决方案

浏览器缓存作用域

注意

相关推荐

取消回复欢迎 你 发表评论:

深圳尚学堂Java面试习题集(六)

MySQL 日期操作函数大全:解锁时间处理的奥秘

Android 工程师必知必会的“AOP知识”

工作3年出去面试Java，被鄙视spring的接口有哪些都不清楚

SpringBoot-24-默认Json框架jackson详解

互联网应用高并发中间件:RabbitMQ的安装和配置

SQLMAP注入参数-其他参数介绍 sqlmap怎么对一个注入点注入

Word中 ↑↓← → ↘↙这些箭头怎么打出来

从零开始:一步一步教你下载、安装和配置Oracle数据库

我和你一起学鸿蒙(十)——组件扩展

取消回复欢迎你发表评论: