React+Spring Boot部署后GET正常，POST/PUT/DELETE返回403问题排查

结合你遇到的GET请求正常、POST/PUT/DELETE请求返回403，且Postman调用所有接口均正常的情况，核心问题大概率出在CSRF防护或Nginx/CORS配置细节上，以下是具体排查和解决步骤：

1. 检查Spring Boot的CSRF防护配置 #

Spring Security默认开启CSRF防护，仅会拦截浏览器发起的POST/PUT/DELETE请求（Postman这类非浏览器请求不受限制），这是最常见的触发403的原因：

• 查看后端SecurityConfig类，确认CSRF配置：

  @Override
  protected void configure(HttpSecurity http) throws Exception {
      // 若开启CSRF，需配置让前端能获取并携带token
      http.csrf(csrf -> csrf.csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse()));
      // 其他安全配置...
  }
  

  若开启了CSRF，需确保：
  • 后端通过CookieCsrfTokenRepository返回XSRF-TOKEN cookie（withHttpOnlyFalse()允许前端读取该cookie）
  • 前端在POST/PUT/DELETE请求的请求头中携带X-XSRF-TOKEN，值为cookie中的XSRF-TOKEN内容
  • 前端请求需开启withCredentials（允许携带cookie）

2. 调整Nginx的CORS与请求转发配置 #

Nginx可能未正确处理OPTIONS预检请求，或转发时丢失了必要的请求头：

• 在nginx.conf中添加OPTIONS请求处理规则，并完善转发配置：

  server {
      # 其他基础配置...
  
      # 处理OPTIONS预检请求，直接返回204并设置CORS头
      if ($request_method = OPTIONS) {
          add_header Access-Control-Allow-Origin $http_origin;
          add_header Access-Control-Allow-Methods GET, POST, PUT, DELETE, OPTIONS;
          add_header Access-Control-Allow-Headers Content-Type, Authorization, X-XSRF-TOKEN;
          add_header Access-Control-Allow-Credentials true;
          return 204;
      }
  
      # 转发后端接口时保留必要请求头
      location /api/ {
          proxy_pass http://your-spring-boot-service:port/;
          proxy_set_header Host $host;
          proxy_set_header X-Forwarded-Proto $scheme;
          proxy_set_header X-Forwarded-For $remote_addr;
          # 回传CORS相关头
          add_header Access-Control-Allow-Origin $http_origin;
          add_header Access-Control-Allow-Credentials true;
      }
  }
  

  注意：$http_origin会动态匹配前端请求的源，比固定写域名更灵活；确保Access-Control-Allow-Methods包含所有你需要的HTTP方法。

3. 前端请求配置检查 #

确保React请求正确携带必要信息：

• 若使用axios，添加全局拦截器处理CSRF token：

  import axios from 'axios';
  
  axios.defaults.baseURL = '/api';
  axios.defaults.withCredentials = true; // 允许携带cookie
  
  axios.interceptors.request.use((config) => {
      // 从cookie中读取XSRF-TOKEN
      const xsrfToken = document.cookie.match(/XSRF-TOKEN=([^;]+)/)?.[1];
      if (xsrfToken) {
          config.headers['X-XSRF-TOKEN'] = xsrfToken;
      }
      return config;
  });
  

• 若使用fetch，需手动配置credentials和请求头：

  fetch('/api/xxx', {
      method: 'POST',
      credentials: 'include',
      headers: {
          'Content-Type': 'application/json',
          'X-XSRF-TOKEN': document.cookie.match(/XSRF-TOKEN=([^;]+)/)?.[1]
      },
      body: JSON.stringify(data)
  });
  

4. 日志排查辅助 #

• 查看Spring Boot容器日志，查找403错误的具体原因（比如是否明确提示"Invalid CSRF Token"）
• 查看Nginx日志（/var/log/nginx/access.log和error.log），确认OPTIONS请求是否返回204，POST请求的头信息是否完整转发到后端

内容的提问来源于stack exchange，提问作者Terraya