Naprawianie problemów z React i Spring Boot CORS: Zablokowane żądanie GET

Zrozumienie błędów CORS w aplikacjach Spring Boot i React

Podczas tworzenia aplikacji internetowych przy użyciu Zareagować dla frontendu i Wiosenne buty w przypadku backendu częstym problemem, z jakim borykają się programiści, jest niesławny błąd CORS. Ten błąd występuje, gdy przeglądarka blokuje żądanie ze względów bezpieczeństwa, zwłaszcza podczas próby połączenia się z usługą zaplecza hostowaną na innym porcie lub w innej domenie. W tym przypadku podczas tworzenia pliku masz do czynienia z problemem CORS POBIERZ prośbę z React do API Spring Boot.

Komunikat o błędzie zwykle wskazuje, że przeglądarka blokuje Twoje żądanie, ponieważ Kontrola dostępu-Zezwól na pochodzenie nagłówka brakuje lub jest on nieprawidłowo skonfigurowany. Warto zauważyć, że narzędzia takie jak Listonosz nie egzekwuj tych ograniczeń bezpieczeństwa, dlatego Twoje żądanie może działać doskonale w Postmanie, ale nie działać w przeglądarce.

W Twoim scenariuszu komunikat o błędzie wskazuje, że żądanie inspekcji wstępnej nie przeszło kontroli kontroli dostępu. Zwykle dzieje się tak, gdy określone nagłówki lub metody są niedozwolone lub odpowiednio skonfigurowane w zasadach CORS serwera. Chociaż wydaje się, że konfiguracja CORS jest wdrożona po stronie serwera, mogą występować specyficzne problemy związane ze sposobem obsługi żądań przeglądarki.

Ten artykuł pomoże Ci zrozumieć pierwotną przyczynę problemu i poprowadzi Cię przez możliwe rozwiązania Błąd CORS-a w aplikacji React i Spring Boot.

Obsługa błędów CORS w aplikacjach React i Spring Boot

Skrypty podane powyżej mają na celu rozwiązanie problemu Błędy CORS-a w konfiguracji frontendu React i backendu Spring Boot. Błąd występuje, gdy interfejs hostowany na „http://localhost:8081” próbuje wysłać żądanie GET do interfejsu API Spring Boot hostowanego na „http://localhost:8080”. Przeglądarki wymuszają rygorystyczne reguły bezpieczeństwa, aby zapobiec nieautoryzowanym żądaniom z różnych źródeł, dlatego istnieją zasady CORS. The Konfigurator WebMvc class w konfiguracji zaplecza Spring Boot pomaga zdefiniować reguły CORS, które pozwalają na określone źródła i metody, ostatecznie rozwiązując problem.

W backendzie plik `CorsConfig.java` definiuje klasę konfiguracyjną Spring Boot. The @Fasola I @Prześcigać adnotacje służą do wstrzykiwania i dostosowywania konfiguracji CORS. W metodzie `addCorsMappings()` funkcja `allowedOrigins()` jawnie zezwala na żądania z 'http://localhost:8081', upewniając się, że przeglądarka rozpoznaje to źródło jako zaufane źródło. Dołączenie metody „allowedMethods()” gwarantuje, że wszystkie metody HTTP, w tym GET, POST i OPTIONS, będą dozwolone. Ma to kluczowe znaczenie, ponieważ przeglądarki zazwyczaj wysyłają żądanie OPCJE wstępnej inspekcji, aby sprawdzić, czy rzeczywiste żądanie GET jest dozwolone.

Na froncie React obsługuje żądania za pomocą Osie, popularny klient HTTP. W funkcji `fetchData` pliku `ProjectPage.tsx` funkcja `axios.get()` wysyła żądanie GET do backendu Spring Boot. Opcja `withCredentials` jest ustawiona na true, co pozwala na wysyłanie plików cookie i danych uwierzytelniających wraz z żądaniem. Dodatkowo dołączony jest nagłówek Authorization, który przekazuje token użytkownika, zapewniając prawidłowe uwierzytelnienie żądania. Bez tych konfiguracji przeglądarka blokowałaby żądanie ze względów bezpieczeństwa.

Na koniec plik testu jednostkowego „CorsTest.java” sprawdza, czy konfiguracja CORS działa zgodnie z oczekiwaniami. Ten test symuluje żądanie HTTP OPTIONS do interfejsu API zaplecza, które naśladuje prawdziwe żądanie wstępne wykonane przez przeglądarkę. Test sprawdza, czy odpowiedź zawiera prawidłowe nagłówki, np Kontrola dostępu-Zezwól na pochodzenie, który umożliwia żądania między źródłami z frontendu. Metoda `MockMvcResultMatchers.header()` zapewnia, że ​​serwer poprawnie odpowiada na żądania inspekcji wstępnej. Uwzględniając testy jednostkowe, programiści mogą zapewnić, że ich konfiguracja CORS będzie niezawodna i funkcjonalna w różnych środowiskach.

// 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);
   }
}

// 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;

// 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"));
   }
}

Odkrywanie CORS w kontekście bezpieczeństwa i projektowania API

Kiedy mamy do czynienia z CORS (współdzielenie zasobów między źródłami) w nowoczesnych aplikacjach internetowych niezwykle ważne jest zrozumienie konsekwencji związanych z bezpieczeństwem. CORS jest wdrażany jako środek bezpieczeństwa przeglądarek, mający na celu zapobieganie wysyłaniu przez złośliwe strony internetowe nieautoryzowanych żądań do interfejsu API w imieniu użytkowników. Jest to szczególnie ważne w scenariuszach, w których poufne dane są wymieniane między usługami frontonu i backendu, takie jak tokeny uwierzytelniające i poświadczenia użytkownika. Konfigurując CORS w backendie Spring Boot, ważne jest, aby umożliwić dostęp do chronionych zasobów tylko zaufanym źródłom, co czyni konfigurację zabezpieczeń kluczowym elementem architektury systemu.

Kolejnym istotnym aspektem jest obsługa żądań inspekcji wstępnej, czyli automatycznych żądań wysyłanych przez przeglądarkę przed faktycznym żądaniem GET lub POST. Dzieje się tak, gdy klient musi potwierdzić, czy serwer zezwala na żądania między źródłami i obsługuje określone nagłówki lub metody. W niektórych przypadkach błędne konfiguracje w ich obsłudze żądania wstępne może powodować problemy, powodujące błędy CORS, nawet jeśli rzeczywiste żądanie działa poprawnie w narzędziach takich jak Postman. Skonfigurowanie „CorsRegistry” Spring Boot z właściwymi nagłówkami i metodami gwarantuje, że żądania wstępnej inspekcji będą przetwarzane poprawnie, umożliwiając płynną interakcję pomiędzy frontendem i backendem.

Co więcej, obsługa CORS nie powinna być statyczna ani uniwersalna. W środowiskach dynamicznych, takich jak te zarządzane za pomocą mikrousług, różne interfejsy API mogą mieć różne wymagania dotyczące bezpieczeństwa. Niektóre interfejsy API mogą wymagać jedynie ujawnienia niektórych metod, podczas gdy inne mogą wymagać ściślejszej kontroli nad pochodzeniem. W tym miejscu ważne staje się dostrojenie konfiguracji CORS dla każdego punktu końcowego. Właściwe zarządzanie CORS pomaga również w optymalizacji wydajności API poprzez redukcję niepotrzebnych żądań inspekcji wstępnej i zapewnienie płynnej interakcji użytkownika.