【前端如何利用 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 跨域问题

相关推荐
xzkyd outpaper3 分钟前
Java泛型使用常见报错
java
小陈爱coding10 分钟前
Java线程池终极指南:从公用池设计、TraceId透传到事务陷阱,避坑必看!
java
肥仔哥哥193020 分钟前
基于OpenCv做照片分析应用一(Java)
java·人工智能·opencv·基于图片关键点分析截图
David爱编程25 分钟前
高并发业务场景全盘点:电商、支付、IM、推荐系统背后的技术挑战
java·后端
执键行天涯2 小时前
Maven 依赖传递与排除基础逻辑
java·git·maven
花花无缺2 小时前
`api`、`common`、`service`、`web` 分层架构设计
java·后端
Code_Artist2 小时前
说说恶龙禁区Unsafe——绕过静态类型安全检查&直接操作内存的外挂
java·后端·操作系统
赵星星5202 小时前
别再搞混了!深入浅出理解Java线程中start()和run()的本质区别
java·后端
花花无缺3 小时前
接口(interface)中的常量和 类(class)中的常量的区别
java·后端
毕设源码-郭学长3 小时前
【开题答辩全过程】以 基于vue+springboot的校园疫情管理系统的设计与实现为例,包含答辩的问题和答案
java·spring boot·后端