修复 React 和 Spring Boot CORS 问题：阻止 GET 请求

通过配置调整解决 React + Spring Boot 中的 CORS 错误

方法一：在后端使用 Spring Boot CORS 配置

// CorsConfig.java
@Configuration
public class CorsConfig implements WebMvcConfigurer {
   @Override
   public void addCorsMappings(CorsRegistry registry) {
      registry.addMapping("/")
              .allowedOrigins("http://localhost:8081")
              .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
              .allowedHeaders("*")
              .allowCredentials(true);
   }
}

在 React 中使用 Axios 通过 Cookie 进行正确的 CORS 处理

方法 2：针对跨源请求的 React 前端 Axios 配置

// ProjectPage.tsx
const ProjectsPage = () => {
   const [projectsData, setProjectsData] = useState<ProjectsData[]>([]);
   const projectsUrl = 'http://localhost:8080/api/projects/admin/toinspection';
   useEffect(() => { fetchData(); }, []);
   const fetchData = async () => {
      const token = Cookies.get('token');
      try {
         const response = await axios.get<ProjectsData[]>(projectsUrl, {
            headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` },
            withCredentials: true
         });
         setProjectsData(response.data);
      } catch (error) {
         console.error("Error fetching projects:", error);
      }
   };
   return (
      <div>
         <AdminPageTemplate type="projects" children=<AdminModContent data={projectsData} />/>
      </div>
   );
};
export default ProjectsPage;

在 Spring Boot 中使用单元测试测试 CORS 策略

方法 3：编写单元测试来验证 CORS 策略

// CorsTest.java
@RunWith(SpringRunner.class)
@WebMvcTest
public class CorsTest {
   @Autowired
   private MockMvc mockMvc;
   @Test
   public void testCorsHeaders() throws Exception {
      mockMvc.perform(MockMvcRequestBuilders.options("/api/projects/admin/toinspection")
              .header(HttpHeaders.ORIGIN, "http://localhost:8081")
              .header(HttpHeaders.ACCESS_CONTROL_REQUEST_METHOD, "GET"))
              .andExpect(MockMvcResultMatchers.status().isOk())
              .andExpect(MockMvcResultMatchers.header().exists("Access-Control-Allow-Origin"))
              .andExpect(MockMvcResultMatchers.header().string("Access-Control-Allow-Origin", "http://localhost:8081"));
   }
}

有关 React 和 Spring Boot 中 CORS 的常见问题

1. 什么是 CORS，为什么需要它？
2. CORS 是浏览器强制执行的一种安全机制，用于允许或阻止跨源请求。您需要它来确保只有受信任的来源才能访问您的 API。
3. 如何在 Spring Boot 中启用 CORS？
4. 在 Spring Boot 中，可以通过配置启用 CORS @WebMvcConfigurer 接口并使用指定允许的来源、方法和标头 allowedOrigins 和 allowedMethods。
5. 为什么我的请求在 Postman 中有效，但在浏览器中失败？
6. Postman 绕过了 CORS 等浏览器安全策略，但浏览器严格执行它们。确保您的服务器向浏览器发送正确的 CORS 标头。
7. 什么是预检请求？
8. 预检请求是自动的 OPTIONS 浏览器发送的请求，以检查服务器是否允许实际请求，特别是对于非简单的 HTTP 请求。
9. 如何测试我的 CORS 设置？
10. 您可以使用以下命令测试您的 CORS 配置 MockMvcRequestBuilders.options() 在单元测试中模拟预检请求并验证服务器响应。

关于 React 和 Spring Boot 中 CORS 的最终想法

解决 CORS 错误 在使用 React 和 Spring Boot 的应用程序中，需要清楚地了解浏览器强制执行的安全策略。通过在 Spring Boot 后端正确配置允许的来源和方法，大多数问题都可以避免。

此外，安全地处理请求中的令牌并确保发送正确的标头将确保前端和后端系统之间的顺利通信。本指南有助于解决开发人员面临的常见挑战，确保跨源请求的安全和功能。