React- en Spring Boot CORS-problemen oplossen: geblokkeerd GET-verzoek

CORS-fouten in Spring Boot- en React-apps begrijpen

Bij het ontwikkelen van webapplicaties met behulp van Reageren voor de frontend en Lente laars voor de backend is een veelvoorkomend probleem waarmee ontwikkelaars worden geconfronteerd de beruchte CORS-fout. Deze fout treedt op wanneer de browser om veiligheidsredenen een verzoek blokkeert, vooral wanneer wordt geprobeerd verbinding te maken met een backend-service die op een andere poort of domein wordt gehost. In dit geval heeft u te maken met een CORS-probleem tijdens het maken van een KRIJG verzoek van Reageren op een Spring Boot API.

De foutmelding geeft meestal aan dat de browser uw verzoek blokkeert omdat de Toegangscontrole-Allow-Origin header ontbreekt of is onjuist geconfigureerd. Het is vermeldenswaard dat tools zoals Postbode dwing deze beveiligingsbeperkingen niet af. Daarom werkt uw verzoek mogelijk perfect in Postman, maar mislukt het in de browser.

In uw scenario geeft het foutbericht aan dat een preflightverzoek de toegangscontrole niet doorstaat. Dit gebeurt meestal wanneer bepaalde headers of methoden niet zijn toegestaan ​​of niet correct zijn geconfigureerd in het CORS-beleid van de server. Hoewel de CORS-configuratie aan de serverzijde aanwezig lijkt te zijn, kunnen er specifieke problemen zijn met de manier waarop browserverzoeken worden afgehandeld.

Dit artikel helpt u de hoofdoorzaak van het probleem te begrijpen en begeleidt u bij mogelijke oplossingen om het probleem op te lossen CORS-fout in uw React- en Spring Boot-applicatie.

Omgaan met CORS-fouten in React- en Spring Boot-applicaties

De hierboven gegeven scripts zijn bedoeld om het probleem op te lossen CORS-fouten in een React frontend en Spring Boot backend-opstelling. De fout treedt op wanneer de frontend, gehost op 'http://localhost:8081', probeert een GET-verzoek in te dienen bij een Spring Boot API die wordt gehost op 'http://localhost:8080'. Browsers hanteren strikte beveiligingsregels om ongeautoriseerde cross-origin-verzoeken te voorkomen. Daarom bestaat dit CORS-beleid. De WebMvcConfigurer klasse in de Spring Boot-backend-configuratie helpt bij het definiëren van CORS-regels die specifieke oorsprong en methoden toestaan, waardoor het probleem uiteindelijk wordt opgelost.

In de backend definieert het bestand `CorsConfig.java` een Spring Boot-configuratieklasse. De @Boon En @Overschrijven annotaties worden gebruikt om de CORS-configuratie te injecteren en aan te passen. In de methode `addCorsMappings()` staat de functie `allowedOrigins()` expliciet verzoeken van 'http://localhost:8081' toe, zodat de browser deze oorsprong als een vertrouwde bron herkent. De opname van `allowedMethods()` zorgt ervoor dat alle HTTP-methoden, inclusief GET, POST en OPTIONS, zijn toegestaan. Dit is van cruciaal belang omdat browsers doorgaans een preflight OPTIONS-verzoek verzenden om te controleren of het daadwerkelijke GET-verzoek is toegestaan.

Aan de frontend handelt React verzoeken af ​​met behulp van Axios, een populaire HTTP-client. In de `fetchData`-functie van het `ProjectPage.tsx`-bestand stuurt de `axios.get()`-functie een GET-verzoek naar de Spring Boot-backend. De optie `withCredentials` is ingesteld op true, waardoor cookies en authenticatiegegevens met het verzoek kunnen worden meegestuurd. Bovendien is de Authorization-header opgenomen om het token van de gebruiker door te geven, zodat de aanvraag correct wordt geverifieerd. Zonder deze configuraties zou de browser het verzoek om veiligheidsredenen blokkeren.

Ten slotte valideert het unit-testbestand, `CorsTest.java`, dat de CORS-configuratie werkt zoals verwacht. Deze test simuleert een HTTP OPTIONS-verzoek aan de backend-API, dat een echt preflight-verzoek van de browser nabootst. De test controleert of het antwoord de juiste headers bevat, zoals Toegangscontrole-Allow-Origin, waarmee cross-origineverzoeken vanaf de frontend mogelijk zijn. De methode `MockMvcResultMatchers.header()` zorgt ervoor dat de server correct reageert op preflightverzoeken. Door unit-tests op te nemen, kunnen ontwikkelaars ervoor zorgen dat hun CORS-configuratie betrouwbaar en functioneel is in verschillende omgevingen.

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

CORS verkennen in de context van beveiliging en API-ontwerp

Bij het omgaan met CORS (Cross-Origin Resource Sharing) in moderne webapplicaties is het van cruciaal belang om de veiligheidsimplicaties erachter te begrijpen. CORS wordt door browsers geïmplementeerd als een beveiligingsmaatregel om te voorkomen dat kwaadwillende websites namens gebruikers ongeautoriseerde API-verzoeken indienen. Dit is vooral belangrijk in scenario's waarin gevoelige gegevens worden uitgewisseld tussen frontend- en backend-services, zoals authenticatietokens en gebruikersreferenties. Bij het opzetten van CORS in een Spring Boot-backend is het essentieel om alleen vertrouwde bronnen toegang te geven tot beschermde bronnen, waardoor de beveiligingsconfiguratie een belangrijk element van de systeemarchitectuur wordt.

Een ander cruciaal aspect is het afhandelen van preflightverzoeken, dit zijn automatische verzoeken die door de browser worden gedaan vóór het daadwerkelijke GET- of POST-verzoek. Dit gebeurt wanneer de client moet bevestigen of de server cross-origin-aanvragen toestaat en specifieke headers of methoden ondersteunt. In sommige gevallen zijn er verkeerde configuraties bij de verwerking hiervan preflight-aanvragen kan problemen veroorzaken, wat resulteert in CORS-fouten, zelfs als het daadwerkelijke verzoek prima werkt in tools zoals Postman. Het configureren van Spring Boot’s ‘CorsRegistry’ met de juiste headers en methoden zorgt ervoor dat preflight-verzoeken correct worden verwerkt, waardoor een soepele interactie tussen frontend en backend mogelijk wordt.

Bovendien mag de CORS-behandeling niet statisch of one-size-fits-all zijn. In dynamische omgevingen, zoals die welke worden beheerd met microservices, kunnen verschillende API's verschillende beveiligingsvereisten hebben. Sommige API's hoeven mogelijk alleen bepaalde methoden bloot te leggen, terwijl andere mogelijk een strengere controle over de oorsprong vereisen. Dit is waar het afstemmen van de CORS-configuratie voor elk eindpunt belangrijk wordt. Goed CORS-beheer helpt ook bij het optimaliseren van API-prestaties door onnodige preflight-verzoeken te verminderen en een soepele gebruikersinteractie te garanderen.