React および Spring Boot CORS の問題の修正: ブロックされた GET リクエスト

React + Spring Boot での CORS エラーを構成の調整で解決する

アプローチ 1: バックエンドで 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);
   }
}

Axios を使用して React で 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 とは何ですか? なぜ 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 バックエンドで許可されたオリジンとメソッドを正しく構成することで、これらの問題のほとんどを防ぐことができます。

さらに、リクエスト内のトークンを安全に処理し、適切なヘッダーが送信されるようにすることで、フロントエンド システムとバックエンド システム間の通信がスムーズになります。このガイドは、開発者が直面する一般的な課題に対処し、安全で機能的なクロスオリジンリクエストを保証するのに役立ちます。