【前端如何利用 localStorage 存储 Token 及跨域问题解决方案】


前端如何利用 localStorage 存储 Token 及跨域问题解决方案

一、前言

前后端分离已经是现代 Web 开发的主流模式,在这一模式下,前端通常会通过接口与后端交互,完成数据请求、身份认证等功能。而在身份认证这一环节,前端通常会拿到后端返回的 Token,用于后续请求的身份标识。

那么,前端拿到这个 Token 之后,通常是怎么存储的呢?很多人会选择 localStorage。今天我们就来详细聊聊它的原理使用方式 ,并顺便讲讲大家经常遇到的跨域问题以及解决方案。


二、什么是 localStorage

1️⃣ 定义

localStorage 是浏览器提供的一种本地存储机制,属于 Web Storage API。它用于在 客户端 本地保存少量的键值对数据。

2️⃣ 特点

特点 说明
持久性 数据永久保存在本地,除非用户手动清除浏览器缓存
同源策略 协议、域名、端口都一致时才可访问
容量 通常为 5MB 左右
数据类型 所有数据最终都会被转为字符串保存

三、如何用 localStorage 存储 Token?

1️⃣ 存储代码示例

javascript 复制代码
localStorage.setItem('token', 'your-token-string');

这段代码的作用是:

  • keytoken
  • valueyour-token-string
  • 作用域:只在当前域名有效,刷新页面数据依然存在

2️⃣ 读取代码示例

javascript 复制代码
const token = localStorage.getItem('token');

3️⃣ 清除代码示例

javascript 复制代码
localStorage.removeItem('token');
localStorage.clear(); // 清除所有

四、为什么需要存储 Token?

通常,后端在登录成功后会返回一个 Token(通常是 JWT),前端需要将其保存起来,在后续的请求中带上这个 Token,以便服务器知道「你是谁」。

请求示例:

javascript 复制代码
axios.get('/api/data', {
  headers: {
    Authorization: 'Bearer ' + localStorage.getItem('token')
  }
});

Token 通常放在请求头的 Authorization 字段中。


五、为什么不直接放 Vuex 或 React 状态管理?

Vuex / Redux 等状态管理存储在内存 中,页面刷新就消失了。

localStorage 是存储在浏览器本地,页面刷新也不会丢失

所以一般是登录成功后:

  • 存到 localStorage
  • 刷新页面重新从 localStorage 读取初始化 Vuex / Redux 状态

六、跨域问题与解决方案

1️⃣ 什么是跨域?

浏览器有同源策略 ,不同协议 / 域名 / 端口之间的请求默认会被拦截,出现如下报错:

复制代码
Access to XMLHttpRequest at 'http://api.xxx.com' from origin 'http://localhost:8080' has been blocked by CORS policy.

为什么拦截?

为了防止恶意网站盗用用户信息。


2️⃣ 跨域的常见场景

  • 本地开发时:localhost:8080 请求 localhost:8081
  • 正式环境:www.a.com 请求 api.a.com

3️⃣ 跨域的解决方案

后端开启 CORS

最根本的解决方法是后端开启跨域请求:

http 复制代码
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS

如果你用的是 Spring Boot,代码示例:

java 复制代码
@CrossOrigin
@RestController
@RequestMapping("/api")
public class DemoController {
}

代理解决跨域(开发环境常用)

通过前端代理转发:

javascript 复制代码
// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://backend-server.com',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
};

前端请求:/api/user

实际请求:http://backend-server.com/user


JSONP / iframe

仅限 GET 请求,现代项目很少用,不推荐。


Nginx 反向代理

生产环境统一网关,避免跨域,前端与后端统一域名。

nginx 复制代码
location /api/ {
  proxy_pass http://backend-server.com/;
}

4️⃣ 跨域与 Token 的问题

如果你的跨域场景中涉及到登录态,后端必须支持:

  • CORS + Authorization
  • 或者基于 cookie,则要注意 withCredentials 设置
javascript 复制代码
axios.defaults.withCredentials = true;

七、总结(重点记忆)

存储方式 生命周期 场景
localStorage 永久,除非手动清理 存储 Token、用户偏好
sessionStorage 页面关闭失效 临时数据
cookie 有时效(服务器控制) 登录状态 / 跨域传递状态

跨域根治办法:让后端配置 CORS


八、附:安全提醒

  • Token 建议短时有效、后端验证
  • 防 XSS 注入,避免被盗用
  • HTTPS 保证安全传输

关于 Token 的存储与跨域问题,理解了浏览器的工作原理,这些问题都不再神秘。

如果你还遇到跨域问题、Token 问题、或者想进一步了解 JWT / OAuth2 等安全机制,欢迎留言交流 👏。
Google chrome 跨域问题

相关推荐
峥嵘life13 小时前
Android16 应用代码新特性
java·开发语言·学习·安全
Monkey-旭13 小时前
Android 注解完全指南:从基础概念到自定义实战
android·java·kotlin·注解·annotation
傻啦嘿哟13 小时前
用Requests+BeautifulSoup实现天气预报数据采集:从入门到实战
开发语言·chrome·python
Roye_ack13 小时前
【项目实战 Day5】springboot + vue 苍穹外卖系统(Redis + 店铺经营状态模块 完结)
java·spring boot·redis·学习·mybatis
JIngJaneIL13 小时前
记账本|基于SSM的家庭记账本小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·家庭记账本小程序
Ting-yu13 小时前
Nginx快速入门
java·服务器·前端·nginx
小虎l13 小时前
李兴华-JavaWEB就业编程实战
java
卡卡酷卡BUG13 小时前
Redis 面试常考问题(高频核心版)
java·redis·面试
青云交14 小时前
Java 大视界 -- Java 大数据机器学习模型在金融衍生品定价与风险管理中的应用(415)
java·机器学习·金融衍生品·dl4j·信用风控·spark mllib·期权定价