Åtgärda React och Spring Boot CORS-problem: Blockerad GET-förfrågan

Förstå CORS-fel i Spring Boot- och React-appar

Vid utveckling av webbapplikationer med hjälp av Reagera för frontend och Fjäderkänga för backend är ett vanligt problem för utvecklare det ökända CORS-felet. Det här felet uppstår när webbläsaren blockerar en begäran på grund av säkerhetsskäl, särskilt när du försöker ansluta till en backend-tjänst som finns på en annan port eller domän. I det här fallet har du att göra med ett CORS-problem medan du gör en GET-förfrågan från React till ett Spring Boot API.

Felmeddelandet indikerar vanligtvis att webbläsaren blockerar din begäran eftersom Access-Control-Allow-Origin header saknas eller är felaktigt konfigurerad. Det är värt att notera att verktyg som Brevbärare upprätthåll inte dessa säkerhetsbegränsningar, varför din begäran kanske fungerar perfekt i Postman men misslyckas i webbläsaren.

I ditt scenario indikerar felmeddelandet att en preflight-begäran inte klarar åtkomstkontrollkontrollen. Detta händer vanligtvis när vissa rubriker eller metoder inte är tillåtna eller korrekt konfigurerade i serverns CORS-policy. Även om CORS-konfiguration verkar vara på plats på serversidan, kan det finnas specifika problem med hur den hanterar webbläsarförfrågningar.

Den här artikeln hjälper dig att förstå grundorsaken till problemet och guidar dig genom möjliga lösningar för att lösa problemet CORS-fel i din React and Spring Boot-applikation.

Hantera CORS-fel i React- och Spring Boot-applikationer

Skripten ovan syftar till att lösa problemet med CORS-fel i en React frontend och Spring Boot backend setup. Felet uppstår när gränssnittet, värd på 'http://localhost:8081', försöker göra en GET-förfrågan till ett Spring Boot API som är värd på 'http://localhost:8080'. Webbläsare tillämpar strikta säkerhetsregler för att förhindra obehöriga förfrågningar om korsning, vilket är anledningen till att dessa CORS-policyer finns. De WebMvcConfigurer klass i Spring Boot-backend-konfigurationen hjälper till att definiera CORS-regler som tillåter specifika ursprung och metoder, vilket i slutändan löser problemet.

I backend definierar filen `CorsConfig.java` en Spring Boot-konfigurationsklass. De @Böna och @Åsidosätta annoteringar används för att injicera och anpassa CORS-konfigurationen. I `addCorsMappings()`-metoden tillåter `allowedOrigins()`-funktionen uttryckligen förfrågningar från 'http://localhost:8081', vilket säkerställer att webbläsaren känner igen detta ursprung som en pålitlig källa. Inkluderingen av `allowedMethods()` säkerställer att alla HTTP-metoder, inklusive GET, POST och OPTIONS, är tillåtna. Detta är avgörande eftersom webbläsare vanligtvis skickar en preflight OPTIONS-begäran för att kontrollera om den faktiska GET-begäran är tillåten.

På frontend hanterar React förfrågningar med hjälp av Axios, en populär HTTP-klient. I `fetchData`-funktionen i filen `ProjectPage.tsx` skickar `axios.get()`-funktionen en GET-begäran till Spring Boot-backend. Alternativet "withCredentials" är satt till true, vilket tillåter cookies och autentiseringsuppgifter att skickas med begäran. Dessutom ingår auktoriseringshuvudet för att skicka användarens token, vilket säkerställer att begäran autentiseras korrekt. Utan dessa konfigurationer skulle webbläsaren blockera begäran på grund av säkerhetsskäl.

Slutligen validerar enhetstestfilen, `CorsTest.java`, att CORS-konfigurationen fungerar som förväntat. Detta test simulerar en HTTP OPTIONS-begäran till backend-API:et, som efterliknar en verklig preflight-begäran gjord av webbläsaren. Testet kontrollerar att svaret innehåller rätt rubriker, som t.ex Access-Control-Allow-Origin, som tillåter förfrågningar från gränssnittet. Metoden `MockMvcResultMatchers.header()` säkerställer att servern svarar korrekt på preflight-förfrågningar. Genom att inkludera enhetstester kan utvecklare säkerställa att deras CORS-konfiguration är tillförlitlig och funktionell i olika miljöer.

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

Utforska CORS i samband med säkerhet och API-design

När man har att göra med CORS (Cross-Origin Resource Sharing) i moderna webbapplikationer är det avgörande att förstå säkerhetskonsekvenserna bakom det. CORS implementeras som en säkerhetsåtgärd av webbläsare för att förhindra skadliga webbplatser från att göra obehöriga API-förfrågningar på uppdrag av användare. Detta är särskilt viktigt i scenarier där känslig data utbyts mellan frontend- och backend-tjänster, som autentiseringstokens och användaruppgifter. När du ställer in CORS i en Spring Boot-backend är det viktigt att endast tillåta betrodda ursprung åtkomst till skyddade resurser, vilket gör säkerhetskonfigurationen till en nyckelkomponent i systemets arkitektur.

En annan avgörande aspekt är att hantera förfrågningar om preflight, som är automatiska förfrågningar som görs av webbläsaren före den faktiska GET- eller POST-förfrågan. Detta inträffar när klienten behöver bekräfta om servern tillåter förfrågningar om korsning och stöder specifika rubriker eller metoder. I vissa fall felkonfigurationer i hanteringen av dessa förfrågningar om preflight kan orsaka problem, vilket resulterar i CORS-fel även när den faktiska begäran fungerar bra i verktyg som Postman. Att konfigurera Spring Boots `CorsRegistry` med rätt rubriker och metoder säkerställer att preflight-förfrågningar behandlas korrekt, vilket möjliggör smidig interaktion mellan frontend och backend.

Dessutom bör CORS-hanteringen inte vara statisk eller enastående. I dynamiska miljöer som de som hanteras med mikrotjänster kan olika API:er ha olika säkerhetskrav. Vissa API:er kanske bara behöver exponera vissa metoder, medan andra kan kräva strängare kontroll över ursprung. Det är här det blir viktigt att finjustera CORS-konfigurationen för varje slutpunkt. Korrekt CORS-hantering hjälper också till med att optimera API-prestanda genom att minska onödiga förfrågningar i förväg och säkerställa smidig användarinteraktion.