Behebung von React- und Spring Boot CORS-Problemen: Blockierte GET-Anfrage

Grundlegendes zu CORS-Fehlern in Spring Boot- und React-Apps

Bei der Entwicklung von Webanwendungen mit Reagieren für das Frontend und Frühlingsstiefel Ein häufiges Problem für Entwickler im Backend ist der berüchtigte CORS-Fehler. Dieser Fehler tritt auf, wenn der Browser eine Anfrage aus Sicherheitsgründen blockiert, insbesondere wenn versucht wird, eine Verbindung zu einem Backend-Dienst herzustellen, der auf einem anderen Port oder einer anderen Domäne gehostet wird. In diesem Fall haben Sie es mit einem CORS-Problem zu tun, während Sie eine erstellen GET-Anfrage von React zu einer Spring Boot API.

Die Fehlermeldung weist normalerweise darauf hin, dass der Browser Ihre Anfrage blockiert, weil die Zugriffskontrolle-Zulassen-Ursprung Der Header fehlt entweder oder ist falsch konfiguriert. Es ist erwähnenswert, dass Tools wie Briefträger Erzwingen Sie diese Sicherheitsbeschränkungen nicht, weshalb Ihre Anfrage in Postman möglicherweise einwandfrei funktioniert, im Browser jedoch fehlschlägt.

In Ihrem Szenario weist die Fehlermeldung darauf hin, dass eine Preflight-Anfrage die Zugriffskontrollprüfung nicht besteht. Dies geschieht normalerweise, wenn bestimmte Header oder Methoden in der CORS-Richtlinie des Servers nicht zulässig oder ordnungsgemäß konfiguriert sind. Obwohl die CORS-Konfiguration auf der Serverseite vorhanden zu sein scheint, kann es bei der Verarbeitung von Browseranfragen zu spezifischen Problemen kommen.

Dieser Artikel hilft Ihnen, die Grundursache des Problems zu verstehen und führt Sie durch mögliche Lösungen zur Behebung des Problems CORS-Fehler in Ihrer React- und Spring Boot-Anwendung.

Umgang mit CORS-Fehlern in React- und Spring Boot-Anwendungen

Die oben bereitgestellten Skripte zielen darauf ab, das Problem zu lösen CORS-Fehler in einem React-Frontend- und Spring Boot-Backend-Setup. Der Fehler tritt auf, wenn das Frontend, gehostet auf „http://localhost:8081“, versucht, eine GET-Anfrage an eine Spring Boot-API zu stellen, die auf „http://localhost:8080“ gehostet wird. Browser erzwingen strenge Sicherheitsregeln, um unbefugte Cross-Origin-Anfragen zu verhindern. Aus diesem Grund gibt es diese CORS-Richtlinien. Der WebMvcConfigurer -Klasse in der Spring Boot-Backend-Konfiguration hilft dabei, CORS-Regeln zu definieren, die bestimmte Ursprünge und Methoden zulassen, und letztendlich das Problem lösen.

Im Backend definiert die Datei „CorsConfig.java“ eine Spring Boot-Konfigurationsklasse. Der @Bohne Und @Override Anmerkungen werden zum Einfügen und Anpassen der CORS-Konfiguration verwendet. In der Methode „addCorsMappings()“ lässt die Funktion „allowedOrigins()“ explizit Anfragen von „http://localhost:8081“ zu und stellt so sicher, dass der Browser diesen Ursprung als vertrauenswürdige Quelle erkennt. Durch die Einbeziehung von „allowedMethods()“ wird sichergestellt, dass alle HTTP-Methoden, einschließlich GET, POST und OPTIONS, zulässig sind. Dies ist von entscheidender Bedeutung, da Browser normalerweise eine Preflight-OPTIONS-Anfrage senden, um zu prüfen, ob die tatsächliche GET-Anfrage zulässig ist.

Im Frontend verarbeitet React Anfragen mit Axios, ein beliebter HTTP-Client. In der Funktion „fetchData“ der Datei „ProjectPage.tsx“ sendet die Funktion „axios.get()“ eine GET-Anfrage an das Spring Boot-Backend. Die Option „withCredentials“ ist auf „true“ gesetzt, sodass Cookies und Authentifizierungsdaten mit der Anfrage gesendet werden können. Darüber hinaus ist der Authorization-Header enthalten, um das Token des Benutzers zu übergeben und so sicherzustellen, dass die Anfrage ordnungsgemäß authentifiziert wird. Ohne diese Konfigurationen würde der Browser die Anfrage aus Sicherheitsgründen blockieren.

Abschließend überprüft die Unit-Test-Datei „CorsTest.java“, ob die CORS-Konfiguration wie erwartet funktioniert. Dieser Test simuliert eine HTTP-OPTIONS-Anfrage an die Backend-API, die eine echte Preflight-Anfrage des Browsers nachahmt. Der Test prüft, ob die Antwort die richtigen Header enthält, z Zugriffskontrolle-Zulassen-Ursprung, was Cross-Origin-Anfragen vom Frontend ermöglicht. Die Methode „MockMvcResultMatchers.header()“ stellt sicher, dass der Server korrekt auf Preflight-Anfragen reagiert. Durch die Einbeziehung von Unit-Tests können Entwickler sicherstellen, dass ihre CORS-Konfiguration in verschiedenen Umgebungen zuverlässig und funktionsfähig ist.

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

Erkundung von CORS im Kontext von Sicherheit und API-Design

Beim Umgang mit CORS (Cross-Origin Resource Sharing) Bei modernen Webanwendungen ist es wichtig, die dahinter stehenden Sicherheitsauswirkungen zu verstehen. CORS wird von Browsern als Sicherheitsmaßnahme implementiert, um zu verhindern, dass bösartige Websites im Namen von Benutzern unbefugte API-Anfragen stellen. Dies ist besonders wichtig in Szenarien, in denen vertrauliche Daten zwischen Frontend- und Backend-Diensten ausgetauscht werden, wie z. B. Authentifizierungstokens und Benutzeranmeldeinformationen. Beim Einrichten von CORS in einem Spring Boot-Backend ist es wichtig, nur vertrauenswürdigen Ursprüngen den Zugriff auf geschützte Ressourcen zu ermöglichen, sodass die Sicherheitskonfiguration ein Schlüsselelement der Systemarchitektur ist.

Ein weiterer entscheidender Aspekt ist die Bearbeitung von Preflight-Anfragen, bei denen es sich um automatische Anfragen handelt, die der Browser vor der eigentlichen GET- oder POST-Anfrage stellt. Dies geschieht, wenn der Client bestätigen muss, ob der Server ursprungsübergreifende Anforderungen zulässt und bestimmte Header oder Methoden unterstützt. In einigen Fällen kommt es zu Fehlkonfigurationen bei der Handhabung dieser Preflight-Anfragen kann Probleme verursachen, die zu CORS-Fehlern führen, selbst wenn die eigentliche Anfrage in Tools wie Postman einwandfrei funktioniert. Durch die Konfiguration von „CorsRegistry“ von Spring Boot mit den richtigen Headern und Methoden wird sichergestellt, dass Preflight-Anfragen korrekt verarbeitet werden, was eine reibungslose Interaktion zwischen Frontend und Backend ermöglicht.

Darüber hinaus sollte die Handhabung von CORS nicht statisch oder einheitlich sein. In dynamischen Umgebungen, wie sie beispielsweise mit Microservices verwaltet werden, können unterschiedliche APIs unterschiedliche Sicherheitsanforderungen haben. Einige APIs müssen möglicherweise nur bestimmte Methoden verfügbar machen, während andere möglicherweise eine strengere Kontrolle über die Ursprünge erfordern. Hier ist die Feinabstimmung der CORS-Konfiguration für jeden Endpunkt wichtig. Eine ordnungsgemäße CORS-Verwaltung trägt auch zur Optimierung der API-Leistung bei, indem sie unnötige Preflight-Anfragen reduziert und eine reibungslose Benutzerinteraktion gewährleistet.