React- ja Spring Boot CORS -ongelmien korjaaminen: Estetty GET-pyyntö

CORS-virheiden ymmärtäminen Spring Boot- ja React-sovelluksissa

Kun kehitetään verkkosovelluksia käyttäen Reagoi käyttöliittymälle ja Kevät Boot taustajärjestelmässä kehittäjien yleinen ongelma on pahamaineinen CORS-virhe. Tämä virhe ilmenee, kun selain estää pyynnön turvallisuussyistä, etenkin kun se yrittää muodostaa yhteyden taustapalveluun, jota isännöidään eri portissa tai toimialueella. Tässä tapauksessa olet tekemisissä CORS-ongelman kanssa, kun teet a HAE pyyntö Reactista Spring Boot API:ksi.

Virheilmoitus osoittaa yleensä, että selain estää pyyntösi, koska Access-Control-Allow-Origin otsikko puuttuu tai se on määritetty väärin. On syytä huomata, että työkalut esim Postinkantaja älä pakota näitä suojausrajoituksia, minkä vuoksi pyyntösi saattaa toimia täydellisesti Postmanissa, mutta epäonnistua selaimessa.

Skenaariossasi virhesanoma osoittaa, että esitarkastuspyyntö ei läpäise pääsynvalvontatarkistusta. Tämä tapahtuu yleensä, kun tietyt otsikot tai menetelmät eivät ole sallittuja tai niitä ei ole määritetty oikein palvelimen CORS-käytännössä. Vaikka CORS-määritykset näyttävät olevan käytössä palvelinpuolella, selainpyyntöjen käsittelyssä voi olla erityisiä ongelmia.

Tämä artikkeli auttaa sinua ymmärtämään ongelman perimmäisen syyn ja opastaa sinua löytämään ratkaisuja ongelman ratkaisemiseksi CORS-virhe React and Spring Boot -sovelluksessasi.

CORS-virheiden käsittely React- ja Spring Boot -sovelluksissa

Yllä annetut skriptit pyrkivät ratkaisemaan ongelman CORS-virheet React-käyttöliittymän ja Spring Boot -taustajärjestelmän asetuksissa. Virhe tapahtuu, kun käyttöliittymä, jota isännöi 'http://localhost:8081', yrittää tehdä GET-pyynnön Spring Boot API:lle, jota isännöidään osoitteessa 'http://localhost:8080'. Selaimet noudattavat tiukkoja suojaussääntöjä luvattomien lähteiden välisten pyyntöjen estämiseksi, minkä vuoksi nämä CORS-käytännöt ovat olemassa. The WebMvcConfigurer luokka Spring Boot -taustakokoonpanossa auttaa määrittelemään CORS-säännöt, jotka sallivat tietyt alkuperät ja menetelmät, mikä lopulta ratkaisee ongelman.

Backendissa CorsConfig.java-tiedosto määrittää Spring Boot -määritysluokan. The @Papu ja @Ohittaa huomautuksia käytetään CORS-kokoonpanon lisäämiseen ja mukauttamiseen. `addCorsMappings()-menetelmässä `allowedOrigins()-funktio sallii nimenomaisesti pyynnöt osoitteesta 'http://localhost:8081', mikä varmistaa, että selain tunnistaa tämän alkuperän luotetuksi lähteeksi. "AllowedMethods()"-funktion sisällyttäminen varmistaa, että kaikki HTTP-menetelmät, mukaan lukien GET, POST ja OPTIONS, ovat sallittuja. Tämä on ratkaisevan tärkeää, koska selaimet lähettävät yleensä esitarkastuksen OPTIONS-pyynnön tarkistaakseen, onko todellinen GET-pyyntö sallittu.

Käyttöliittymässä React käsittelee pyynnöt käyttämällä Axios, suosittu HTTP-asiakas. "ProjectPage.tsx"-tiedoston "fetchData"-funktiossa "axios.get()"-funktio lähettää GET-pyynnön Spring Boot -taustajärjestelmään. WithCredentials-vaihtoehto on asetettu arvoon tosi, jolloin evästeet ja todennustiedot voidaan lähettää pyynnön mukana. Lisäksi mukana on valtuutusotsikko, joka välittää käyttäjän tunnuksen ja varmistaa, että pyyntö todennetaan oikein. Ilman näitä määrityksiä selain estäisi pyynnön turvallisuussyistä.

Lopuksi yksikkötestitiedosto "CorsTest.java" vahvistaa, että CORS-kokoonpano toimii odotetulla tavalla. Tämä testi simuloi HTTP OPTIONS -pyynnön taustasovellusliittymälle, joka jäljittelee todellista selaimen tekemää esitarkastuspyyntöä. Testi tarkistaa, että vastaus sisältää oikeat otsikot, kuten Access-Control-Allow-Origin, joka mahdollistaa useiden lähteiden väliset pyynnöt käyttöliittymästä. "MockMvcResultMatchers.header()" -menetelmä varmistaa, että palvelin vastaa oikein esitarkastuspyyntöihin. Sisällyttämällä yksikkötestejä kehittäjät voivat varmistaa, että heidän CORS-kokoonpanonsa on luotettava ja toimiva eri ympäristöissä.

// 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:n tutkiminen turvallisuuden ja API-suunnittelun kontekstissa

Kun ollaan tekemisissä CORS (cross-Origin Resource Sharing) nykyaikaisissa verkkosovelluksissa on ratkaisevan tärkeää ymmärtää sen taustalla olevat turvallisuusvaikutukset. Selaimet ottavat käyttöön CORS:n turvatoimenpiteenä, jolla estetään haitallisia verkkosivustoja tekemästä luvattomia API-pyyntöjä käyttäjien puolesta. Tämä on erityisen tärkeää skenaarioissa, joissa arkaluontoisia tietoja vaihdetaan käyttöliittymän ja taustapalvelun välillä, kuten todennustunnisteita ja käyttäjän tunnistetietoja. Kun CORS määritetään Spring Boot -taustajärjestelmässä, on tärkeää sallia suojattujen resurssien pääsy vain luotetuille lähteille, mikä tekee suojausmäärityksestä järjestelmän arkkitehtuurin avainelementin.

Toinen tärkeä näkökohta on esitarkastuspyyntöjen käsittely, jotka ovat selaimen automaattisia pyyntöjä ennen varsinaista GET- tai POST-pyyntöä. Tämä tapahtuu, kun asiakkaan on vahvistettava, hyväksyykö palvelin useiden lähteiden pyynnöt ja tukeeko tiettyjä otsikoita tai menetelmiä. Joissakin tapauksissa virheelliset asetukset näiden käsittelyssä lentoa edeltäviä pyyntöjä voi aiheuttaa ongelmia, jotka johtavat CORS-virheisiin, vaikka varsinainen pyyntö toimii hyvin työkaluissa, kuten Postman. Spring Bootin CorsRegistryn määrittäminen oikeilla otsikoilla ja menetelmillä varmistaa, että esitarkastuspyynnöt käsitellään oikein, mikä mahdollistaa sujuvan vuorovaikutuksen käyttöliittymän ja taustajärjestelmän välillä.

Lisäksi CORS-käsittelyn ei pitäisi olla staattista tai kaikille sopivaa. Dynaamisissa ympäristöissä, kuten mikropalveluilla hallittavissa ympäristöissä, eri sovellusliittymillä voi olla erilaiset suojausvaatimukset. Jotkut API:t saattavat joutua paljastamaan vain tietyt menetelmät, kun taas toiset saattavat vaatia tiukempaa alkuperän valvontaa. Tässä CORS-määrityksen hienosäätö jokaiselle päätepisteelle tulee tärkeäksi. Oikea CORS-hallinta auttaa myös optimoimaan API:n suorituskykyä vähentämällä tarpeettomia esitarkastuspyyntöjä ja varmistamalla sujuvan vuorovaikutuksen.