为何Axios请求返回403错误？API测试正常前端报错

我使用以下Axios请求时返回403错误：

useEffect(() => {
   
    const fetchData = async () => {
      try {
        const response = await axiosPrivate.get("http://localhost:8080/api/v1/tm/NewManagmentRequests",{
         
        }); 
        if (response.status === 200) {
          setTableData(response.data); 
        } else {
          console.error("Failed to fetch data from the backend.");
        }
      } catch (error) {
        console.error("Error while fetching data:", error);
      }
    };

    fetchData(); // 组件挂载时调用fetchData
  }, []);

我的SpringBoot后端已配置允许localhost:3000端口的请求，API测试工具能成功获取响应，但前端无论是用Axios还是fetch请求都返回403，清除Cookie后问题依旧。

相关截图说明：

• 控制台错误：加载表格数据时显示403状态码错误
• 后端跨域配置截图：已明确设置允许localhost:3000的请求

排查建议 #

• 对比请求头差异：把API测试工具的请求头和前端请求头做对比，重点看Authorization、Cookie、Origin这些字段。后端可能要求认证信息，测试工具手动携带了，但前端请求没传。
• 检查Spring Security权限规则：如果后端用了Spring Security，除了跨域配置，要确认该API是否允许匿名访问，或者是否需要特定权限。测试工具可能用了有权限的账号，而前端请求没带认证凭证。
• CSRF Token配置：Spring Security默认开启CSRF防护，前端请求需要携带CSRF Token。可以尝试在请求头中添加X-XSRF-TOKEN，值从浏览器Cookie中获取对应的XSRF-TOKEN值。
• 跨域配置完整性：确认后端跨域配置是否开启了allowCredentials(true)，如果前端需要传递Cookie或认证头，这个选项必须设置，否则浏览器会拦截响应。
• 验证请求路径一致性：检查前端请求的URL和测试工具使用的是否完全一致，包括大小写、路径参数等，避免因路径拼写错误导致的权限拦截。

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