当前位置：首页 > news >正文

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

news 2025/7/18 13:22:07

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

一、前言

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

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

二、什么是 `localStorage`

1️⃣ 定义

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

2️⃣ 特点

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

三、如何用 `localStorage` 存储 Token？

1️⃣ 存储代码示例

localStorage.setItem('token', 'your-token-string');

这段代码的作用是：

key：token
value：your-token-string
作用域：只在当前域名有效，刷新页面数据依然存在

2️⃣ 读取代码示例

const token = localStorage.getItem('token');

3️⃣ 清除代码示例

localStorage.removeItem('token');
localStorage.clear(); // 清除所有

四、为什么需要存储 Token？

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

请求示例：

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

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

Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS

如果你用的是 Spring Boot，代码示例：

@CrossOrigin
@RestController
@RequestMapping("/api")
public class DemoController {
}

✅ 代理解决跨域（开发环境常用）

通过前端代理转发：

// 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 反向代理

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

location /api/ {proxy_pass http://backend-server.com/;
}

4️⃣ 跨域与 Token 的问题

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

CORS + Authorization
或者基于 cookie，则要注意 withCredentials 设置

axios.defaults.withCredentials = true;

七、总结（重点记忆）

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

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