Διόρθωση ζητημάτων React και Spring Boot CORS: Αποκλείστηκε το αίτημα GET

Κατανόηση των σφαλμάτων CORS στις εφαρμογές Spring Boot και React

Κατά την ανάπτυξη εφαρμογών web χρησιμοποιώντας Αντιδρώ για το frontend και Ανοιξιάτικη Μπότα για το backend, ένα κοινό πρόβλημα που αντιμετωπίζουν οι προγραμματιστές είναι το περιβόητο σφάλμα CORS. Αυτό το σφάλμα παρουσιάζεται όταν το πρόγραμμα περιήγησης αποκλείει ένα αίτημα για λόγους ασφαλείας, ειδικά όταν προσπαθείτε να συνδεθείτε σε μια υπηρεσία υποστήριξης που φιλοξενείται σε διαφορετική θύρα ή τομέα. Σε αυτήν την περίπτωση, αντιμετωπίζετε ένα ζήτημα CORS ενώ κάνετε ένα Αίτημα GET από το React σε ένα Spring Boot API.

Το μήνυμα σφάλματος συνήθως υποδεικνύει ότι το πρόγραμμα περιήγησης αποκλείει το αίτημά σας επειδή το Access-Control-Allow-Origin Η κεφαλίδα είτε λείπει είτε έχει ρυθμιστεί εσφαλμένα. Αξίζει να σημειωθεί ότι εργαλεία όπως Ταχυδρόμος μην επιβάλλετε αυτούς τους περιορισμούς ασφαλείας, γι' αυτό το αίτημά σας μπορεί να λειτουργεί τέλεια στο Postman αλλά να αποτύχει στο πρόγραμμα περιήγησης.

Στο σενάριό σας, το μήνυμα σφάλματος υποδεικνύει ότι ένα αίτημα πριν από την πτήση δεν περνά τον έλεγχο ελέγχου πρόσβασης. Αυτό συμβαίνει συνήθως όταν ορισμένες κεφαλίδες ή μέθοδοι δεν επιτρέπονται ή δεν έχουν ρυθμιστεί σωστά στην πολιτική CORS του διακομιστή. Ενώ η διαμόρφωση CORS φαίνεται να υπάρχει από την πλευρά του διακομιστή, ενδέχεται να υπάρχουν συγκεκριμένα προβλήματα με τον τρόπο με τον οποίο χειρίζεται τα αιτήματα του προγράμματος περιήγησης.

Αυτό το άρθρο θα σας βοηθήσει να κατανοήσετε τη βασική αιτία του προβλήματος και θα σας καθοδηγήσει σε πιθανές λύσεις για την επίλυση του Σφάλμα CORS στην εφαρμογή React και Spring Boot.

Χειρισμός σφαλμάτων CORS σε εφαρμογές React και Spring Boot

Τα σενάρια που παρέχονται παραπάνω στοχεύουν να λύσουν το πρόβλημα του Σφάλματα CORS σε μια ρύθμιση backend React και Spring Boot. Το σφάλμα παρουσιάζεται όταν η διεπαφή, που φιλοξενείται στο 'http://localhost:8081', επιχειρεί να κάνει ένα αίτημα GET σε ένα Spring Boot API που φιλοξενείται στο 'http://localhost:8080'. Τα προγράμματα περιήγησης επιβάλλουν αυστηρούς κανόνες ασφαλείας για να αποτρέψουν μη εξουσιοδοτημένα αιτήματα πολλαπλής προέλευσης, γι' αυτό υπάρχουν αυτές οι πολιτικές CORS. Ο WebMvcConfigurer Η κλάση στη διαμόρφωση του backend της Spring Boot βοηθά στον καθορισμό κανόνων CORS που επιτρέπουν συγκεκριμένες προελεύσεις και μεθόδους, επιλύοντας τελικά το πρόβλημα.

Στο backend, το αρχείο «CorsConfig.java» ορίζει μια κλάση διαμόρφωσης Spring Boot. Ο @Φασόλι και @Καταπατώ Οι σχολιασμοί χρησιμοποιούνται για την εισαγωγή και την προσαρμογή της διαμόρφωσης CORS. Στη μέθοδο "addCorsMappings()", η συνάρτηση "allowedOrigins()" επιτρέπει ρητά αιτήματα από το "http://localhost:8081", διασφαλίζοντας ότι το πρόγραμμα περιήγησης αναγνωρίζει αυτήν την προέλευση ως αξιόπιστη πηγή. Η συμπερίληψη του "allowedMethods()" διασφαλίζει ότι επιτρέπονται όλες οι μέθοδοι HTTP, συμπεριλαμβανομένων των GET, POST και OPTIONS. Αυτό είναι ζωτικής σημασίας επειδή τα προγράμματα περιήγησης συνήθως στέλνουν ένα αίτημα OPTIONS πριν από την πτήση για να ελέγξουν εάν επιτρέπεται το πραγματικό αίτημα GET.

Στο frontend, το React χειρίζεται αιτήματα χρησιμοποιώντας Αξιος, ένα δημοφιλές πρόγραμμα-πελάτη HTTP. Στη συνάρτηση «fetchData» του αρχείου «ProjectPage.tsx», η συνάρτηση «axios.get()» στέλνει ένα αίτημα GET στο σύστημα υποστήριξης Spring Boot. Η επιλογή "withCredentials" έχει οριστεί σε true, επιτρέποντας την αποστολή cookie και διαπιστευτηρίων ελέγχου ταυτότητας μαζί με το αίτημα. Επιπλέον, περιλαμβάνεται η κεφαλίδα εξουσιοδότησης για να περάσει το διακριτικό του χρήστη, διασφαλίζοντας ότι το αίτημα έχει επαληθευτεί σωστά. Χωρίς αυτές τις διαμορφώσεις, το πρόγραμμα περιήγησης θα μπλοκάρει το αίτημα για λόγους ασφαλείας.

Τέλος, το αρχείο δοκιμής μονάδας, «CorsTest.java», επικυρώνει ότι η διαμόρφωση CORS λειτουργεί όπως αναμένεται. Αυτή η δοκιμή προσομοιώνει ένα αίτημα HTTP OPTIONS στο backend API, το οποίο μιμείται ένα πραγματικό αίτημα πριν από την πτήση που υποβλήθηκε από το πρόγραμμα περιήγησης. Το τεστ ελέγχει ότι η απάντηση περιέχει τις σωστές κεφαλίδες, όπως π.χ Access-Control-Allow-Origin, το οποίο επιτρέπει αιτήματα cross-origin από το frontend. Η μέθοδος `MockMvcResultMatchers.header()` διασφαλίζει ότι ο διακομιστής ανταποκρίνεται σωστά σε αιτήματα πριν από την πτήση. Συμπεριλαμβάνοντας δοκιμές μονάδων, οι προγραμματιστές μπορούν να διασφαλίσουν ότι η διαμόρφωση 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);
   }
}

// 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 στο πλαίσιο της ασφάλειας και του σχεδιασμού API

Όταν ασχολείται με CORS (Κοινή χρήση πόρων μεταξύ προέλευσης) στις σύγχρονες διαδικτυακές εφαρμογές, είναι σημαντικό να κατανοήσουμε τις επιπτώσεις στην ασφάλεια πίσω από αυτό. Το CORS εφαρμόζεται ως μέτρο ασφαλείας από τα προγράμματα περιήγησης για την αποτροπή κακόβουλων ιστότοπων από το να κάνουν μη εξουσιοδοτημένα αιτήματα API για λογαριασμό των χρηστών. Αυτό είναι ιδιαίτερα σημαντικό σε σενάρια όπου ανταλλάσσονται ευαίσθητα δεδομένα μεταξύ υπηρεσιών frontend και backend, όπως διακριτικά ελέγχου ταυτότητας και διαπιστευτήρια χρήστη. Κατά τη ρύθμιση του CORS σε ένα backend Spring Boot, είναι σημαντικό να επιτρέπεται μόνο σε αξιόπιστες πηγές να έχουν πρόσβαση σε προστατευμένους πόρους, καθιστώντας τη διαμόρφωση ασφαλείας βασικό στοιχείο της αρχιτεκτονικής του συστήματος.

Μια άλλη κρίσιμη πτυχή είναι ο χειρισμός των αιτημάτων πριν από την πτήση, τα οποία είναι αυτόματα αιτήματα που γίνονται από το πρόγραμμα περιήγησης πριν από το πραγματικό αίτημα GET ή POST. Αυτό συμβαίνει όταν ο πελάτης πρέπει να επιβεβαιώσει εάν ο διακομιστής επιτρέπει αιτήματα cross-origin και υποστηρίζει συγκεκριμένες κεφαλίδες ή μεθόδους. Σε ορισμένες περιπτώσεις, εσφαλμένες διαμορφώσεις στο χειρισμό τους αιτήματα πριν από την πτήση μπορεί να προκαλέσει προβλήματα, με αποτέλεσμα σφάλματα CORS ακόμη και όταν το πραγματικό αίτημα λειτουργεί καλά σε εργαλεία όπως ο Postman. Η διαμόρφωση του «CorsRegistry» του Spring Boot με τις σωστές κεφαλίδες και μεθόδους διασφαλίζει τη σωστή επεξεργασία των αιτημάτων πριν από την πτήση, επιτρέποντας την ομαλή αλληλεπίδραση μεταξύ του frontend και του backend.

Επιπλέον, ο χειρισμός CORS δεν πρέπει να είναι στατικός ή να ταιριάζει σε όλους. Σε δυναμικά περιβάλλοντα όπως αυτά που διαχειρίζονται οι μικροϋπηρεσίες, διαφορετικά API μπορεί να έχουν διαφορετικές απαιτήσεις ασφαλείας. Ορισμένα API μπορεί να χρειαστεί να εκθέσουν μόνο ορισμένες μεθόδους, ενώ άλλα μπορεί να απαιτούν αυστηρότερο έλεγχο της προέλευσης. Εδώ είναι σημαντική η λεπτομέρεια της διαμόρφωσης CORS για κάθε τελικό σημείο. Η σωστή διαχείριση CORS βοηθά επίσης στη βελτιστοποίηση της απόδοσης του API μειώνοντας τα περιττά αιτήματα πριν από την πτήση και διασφαλίζοντας την ομαλή αλληλεπίδραση των χρηστών.