SpringCloud中gateway对用户身份拦截,Vue axios统一处理状态码出现跨域问题

项目中通过SpringCloud Gateway在用户身份验证失败时返回401,并在Vue axios全局拦截处理,同时解决后台过滤器中跨域问题,确保正常运行。

前言

在项目中,我们很多时候都需要对用户身份进行判断,在用户身份无法被验证时,我们返回{status:401,msg:‘XXX’}等,如若能在axios处统一拦截处理,会方便许多;同样,如果在后台gateway处,也能提前对token进行统一验证,避免异常用户的异常访问。

正文

首先在Vue封装的axios工具类中,统一对axios进行拦截操作

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
   
   
  if (response.data.status === 401) {
   
   
    Router.push('/login')
  }
  return response
}, function (error) {
   
   
  return Promise.reject(error)
})

此时,如若后退返回数据的status为401,直接跳转至登录页面。

接着,在后台Gateway层,需要添加一个过滤器,实现对token的验证

<think>嗯,用户这次问的是SpringCloudVue3如何配置HTTPS,看来ta正在开发一个前后端分离的安全应用。之前对话历史显示用户对HTTPS有基础了解,但这次聚焦在具体框架实现上。 用户可能是个全栈开发者,正在搭建企业级微服务系统。从ta引用Jenkins部署的内容看,应该需要生产级解决方案,而不仅是本地测试配置。特别注意到ta提到Vue3而不是Vue2,说明项目技术栈较新。 关于SpringCloud部分,核心是统一网关的HTTPS配置。需要强调两点关键:1) 网关作为唯一入口统一处理SSL卸载 2) 内部微服务保持HTTP通信。证书管理方面,Let's Encrypt虽然免费,但生产环境可能需要考虑证书自动续期方案。 Vue3的配置相对简单,但要注意开发和生产环境的差异。用户可能卡在问题或混合内容警告上,需要明确axios基址配置的细节。另外要提醒Nginx代理时的X-Forwarded-Proto头设置,不然Vue应用可能错误生成HTTP链接。 安全方面补充了HSTS和CSP,因为用户既然关心HTTPS,大概率也需要这些增强措施。最后特意列出常见问题,预判用户可能遇到的证书信任链、Vite开发SSL等坑。 考虑到用户技术背景,回复中直接给出关键配置片段比理论说明更实用。但保留了原理性解释,比如为什么内部服务可以用HTTP,避免用户机械复制配置。 </think> 以下是SpringCloud微服务与Vue3前端应用配置HTTPS的完整方案,结合Nginx统一网关部署: --- ### 一、SpringCloud微服务HTTPS配置 #### 1. 网关层统一HTTPS(Nginx反向代理) **配置步骤**: ```nginx # nginx.conf server { listen 443 ssl; server_name api.yourdomain.com; # 证书配置 ssl_certificate /etc/nginx/ssl/fullchain.pem; # CA证书 ssl_certificate_key /etc/nginx/ssl/privkey.pem; # 私钥 ssl_protocols TLSv1.2 TLSv1.3; # 禁用不安全协议 location / { proxy_pass http://springcloud-gateway:8080; # 内部HTTP转发 proxy_set_header X-Forwarded-Proto $scheme; # 传递HTTPS协议头 } } # HTTP强制跳转HTTPS server { listen 80; server_name api.yourdomain.com; return 301 https://$host$request_uri; } ``` **优势**: - 统一SSL卸载,降低微服务配置复杂度 - 内部服务仍用HTTP通信,性能无损[^1] #### 2. SpringCloud Gateway直接启用HTTPS ```yaml # application.yml server: port: 8443 ssl: enabled: true key-store: classpath:keystore.jks key-store-password: yourpassword key-alias: tomcat spring: cloud: gateway: routes: - id: user-service uri: http://user-service:8081 # 内部HTTP ``` --- ### 二、Vue3前端HTTPS配置 #### 1. 开发环境(Vite) ```js // vite.config.js import { defineConfig } from 'vite' import basicSsl from '@vitejs/plugin-basic-ssl' export default defineConfig({ plugins: [basicSsl()], // 自动生成开发证书 server: { https: true, // 启用HTTPS proxy: { '/api': { target: 'https://api.yourdomain.com', // 后端HTTPS地址 changeOrigin: true } } } }) ``` #### 2. 生产环境(Nginx部署) ```nginx # 前端Nginx配置 server { listen 443 ssl; server_name app.yourdomain.com; ssl_certificate /etc/nginx/ssl/frontend.pem; ssl_certificate_key /etc/nginx/ssl/frontend-key.pem; location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; } # 代理后端API location /api { proxy_pass https://api.yourdomain.com; } } ``` --- ### 三、关键安全配置 1. **安全** Vue3中配置axios: ```js // axios.js import axios from 'axios' const service = axios.create({ baseURL: 'https://api.yourdomain.com', // 强制HTTPS withCredentials: true }) ``` 2. **Cookie安全标记** 后端设置Secure和HttpOnly: ```java // Spring Boot配置 @Bean public CookieSerializer cookieSerializer() { DefaultCookieSerializer serializer = new DefaultCookieSerializer(); serializer.setUseSecureCookie(true); // 仅HTTPS传输 serializer.setUseHttpOnly(true); // 禁止JS访问 return serializer; } ``` 3. **内容安全策略(CSP)** Nginx添加Header: ```nginx add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline'"; ``` --- ### 四、证书管理最佳实践 | 场景 | 推荐方案 | 更新方式 | |--------------|--------------------------|-----------------------| | 本地开发 | 自签名证书(Vite自动生成)| 无需更新 | | 测试环境 | Let's Encrypt 三个月证书 | Certbot自动续期 | | 生产环境 | 商业CA(DigiCert等) | 手动更新+OCSP装订 | > **注**:SpringCloud微服务间调用仍可用HTTP,但需通过内网隔离确保安全[^1] --- ### ⚠️ 常见问题解决 1. **混合内容阻塞** - 现象:HTTPS页面加载HTTP资源被浏览器拦截 - 方案:检查所有资源URL是否为`//`相对协议或`https://`绝对路径 2. **证书链不完整** ```bash # 修复命令 cat domain.crt intermediate.crt root.crt > fullchain.pem ``` 3. **Vite开发证书不受信** - 访问`https://localhost:5173` → 点击"高级" → 强制继续 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值