Token令牌在服务器运维中的跨域问题

Token 令牌在服务器运维中的跨域问题

一、问题成因与常见症状

• 浏览器同源策略限制下，跨域请求若包含自定义请求头（如 Authorization 或自定义 token），会先发送 OPTIONS 预检。若服务器未正确响应预检（未声明允许的方法/头部，或未放行 OPTIONS），浏览器将拦截实际请求，前端表现为“已携带 Token 但后端取不到”或 CORS 错误。
• 使用基于 Cookie 的会话时，前端需设置 withCredentials=true，服务器需配合 Access-Control-Allow-Credentials: true 且 **Allow-Origin 不能为 *（需明确指定源）。
• 开发环境常见为 localhost:8080 → localhost:8081 或 www.a.com → api.a.com；生产环境多域名/网关场景更易出现跨域配置遗漏。
• 典型症状包括：控制台 CORS 报错、后端过滤器/控制器拿不到 Authorization 头、登录态丢失等。

二、运维视角的解决方案优先级

• 统一网关/反向代理（推荐）：通过 Nginx 或 API 网关将前后端统一到同一域名（或同站点），从源头消除浏览器跨域限制。示例：
  • Nginx 反向代理：
    • location /api/ { proxy_pass http://backend-server.com/; }
• 开发期代理：前端开发服务器代理到后端，避免浏览器跨域（如 Vue CLI devServer.proxy）。示例：
  • /api → http://backend-server.com（开发期专用）
• 后端正确开启 CORS（次选）：在网关/应用层统一配置 CORS，确保预检与实际请求均能通过。关键点：
  • 明确 Access-Control-Allow-Origin（不能使用通配符 “*” 当携带凭据时）
  • 允许必要方法：GET/POST/PUT/DELETE/OPTIONS
  • 允许必要请求头：至少包含 Authorization、Content-Type（按需增加自定义头，如 token）
  • 处理 OPTIONS 预检：直接返回 200/204
  • 凭据场景开启 Access-Control-Allow-Credentials: true
• 授权服务器端点特殊处理（如 /oauth/token）：
  • 方案一：在 WebSecurity 中忽略 OPTIONS /oauth/token，避免被 Spring Security 的默认“fullyAuthenticated”策略拦截；并在 AuthorizationServer 端点配置 CORS。
  • 方案二：注册高优先级 CORS Filter，对 /oauth/* 提前返回跨域头并放行 OPTIONS。

三、关键配置示例

• Nginx 反向代理（生产统一域名）

  server {
    listen 80;
    server_name www.example.com;
  
    location / {
      root /usr/share/nginx/html;
      try_files $uri $uri/ /index.html;
    }
  
    location /api/ {
      proxy_pass http://backend-server.com/;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header X-Forwarded-Proto $scheme;
    }
  }
  

• Spring Boot 全局 CORS 过滤器（示例）

  @Component
  @Order(Ordered.HIGHEST_PRECEDENCE)
  public class CorsFilter implements Filter {
      public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
              throws IOException, ServletException {
          HttpServletResponse response = (HttpServletResponse) res;
          HttpServletRequest request = (HttpServletRequest) req;
  
          String origin = request.getHeader("Origin");
          response.setHeader("Access-Control-Allow-Origin", origin); // 明确指定源
          response.setHeader("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE,OPTIONS");
          response.setHeader("Access-Control-Allow-Headers", "Authorization,Content-Type,token");
          response.setHeader("Access-Control-Allow-Credentials", "true");
          response.setHeader("Access-Control-Max-Age", "3600");
          response.setHeader("Access-Control-Expose-Headers", "Authorization"); // 如需前端读取
  
          if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
              response.setStatus(HttpServletResponse.SC_OK);
              return;
          }
          chain.doFilter(req, res);
      }
      // init/destroy 省略
  }
  

• Spring Security OAuth2 Token 端点跨域（两种常用做法）
  • 忽略 OPTIONS 并在端点配置 CORS：

    // WebSecurity 配置
    web.ignoring().antMatchers(HttpMethod.OPTIONS, "/oauth/token");
    
    // AuthorizationServer 配置
    CorsConfiguration cfg = new CorsConfiguration();
    cfg.addAllowedOrigin("http://localhost:5173");
    cfg.addAllowedHeader("*");
    cfg.setAllowCredentials(true);
    cfg.addAllowedMethod("*");
    cfg.setMaxAge(3600L);
    Map<String, CorsConfiguration> map = new HashMap<>();
    map.put("/oauth/token", cfg);
    endpoints.getFrameworkEndpointHandlerMapping().setCorsConfigurations(map);
    

  • 高优先级 CORS Filter（对 /oauth/* 提前放行）。

四、前端与 Token 传递要点

• 使用 Authorization: Bearer 时，后端 Allow-Headers 必须包含 Authorization；前端 Axios 示例：

  axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;
  

• 使用自定义头（如 token）时，后端需显式允许该头：

  response.setHeader("Access-Control-Allow-Headers", "token, Content-Type");
  

• 使用 Cookie 会话时：
  • 前端请求开启凭据：

    axios.defaults.withCredentials = true;
    

  • 后端需：
    • 设置 Access-Control-Allow-Credentials: true
    • Access-Control-Allow-Origin 不能为 “*”，需明确指定前端源
• 开发期建议用 devServer.proxy 或 Nginx 代理，避免浏览器跨域限制；生产期优先统一网关/同站点部署。

五、排障清单与安全建议

• 排障清单
  • 检查浏览器 Network：是否存在 OPTIONS 预检；响应头是否包含 Access-Control-Allow-Origin/Methods/Headers/Credentials/Max-Age。
  • 核对前端是否发送 Authorization 或自定义 token 头；自定义头必须在 Allow-Headers 中声明。
  • 凭据模式：确认 withCredentials=true 与后端 Allow-Credentials: true 成对出现，且 Allow-Origin 为明确源。
  • 授权服务器：确认 /oauth/token 的 OPTIONS 被放行，且端点层已配置 CORS。
  • 统一网关：确认路由转发、协议、端口与前端一致，避免“跨域残留”。
• 安全建议
  • 全站 HTTPS，防止令牌被窃听。
  • Token 短时有效 并提供刷新机制，降低泄露风险。
  • 优先使用 Authorization: Bearer 方案，谨慎依赖第三方 Cookie；防范 XSS，避免 localStorage 被脚本读取。
  • 严格校验 Origin/Referer，仅允许可信来源；对敏感接口启用限流/熔断。