ఫిక్సింగ్ రియాక్ట్ మరియు స్ప్రింగ్ బూట్ CORS సమస్యలు: GET అభ్యర్థన నిరోధించబడింది

స్ప్రింగ్ బూట్ మరియు రియాక్ట్ యాప్‌లలో CORS లోపాలను అర్థం చేసుకోవడం

ఉపయోగించి వెబ్ అప్లికేషన్లను అభివృద్ధి చేస్తున్నప్పుడు ప్రతిస్పందించండి ఫ్రంటెండ్ కోసం మరియు స్ప్రింగ్ బూట్ బ్యాకెండ్ కోసం, డెవలపర్లు ఎదుర్కొనే ఒక సాధారణ సమస్య అప్రసిద్ధ CORS లోపం. భద్రతా కారణాల దృష్ట్యా బ్రౌజర్ అభ్యర్థనను బ్లాక్ చేసినప్పుడు, ప్రత్యేకించి వేరే పోర్ట్ లేదా డొమైన్‌లో హోస్ట్ చేయబడిన బ్యాకెండ్ సేవకు కనెక్ట్ చేయడానికి ప్రయత్నిస్తున్నప్పుడు ఈ లోపం సంభవిస్తుంది. ఈ సందర్భంలో, మీరు ఒక CORS సమస్యతో వ్యవహరిస్తున్నారు అభ్యర్థన పొందండి రియాక్ట్ నుండి స్ప్రింగ్ బూట్ APIకి.

దోష సందేశం సాధారణంగా బ్రౌజర్ మీ అభ్యర్థనను బ్లాక్ చేస్తోందని సూచిస్తుంది యాక్సెస్-నియంత్రణ-అనుమతించు-మూలం శీర్షిక లేదు లేదా తప్పుగా కాన్ఫిగర్ చేయబడింది. వంటి సాధనాలను గమనించడం విలువ పోస్ట్‌మ్యాన్ ఈ భద్రతా పరిమితులను అమలు చేయవద్దు, అందుకే మీ అభ్యర్థన పోస్ట్‌మ్యాన్‌లో సరిగ్గా పని చేయవచ్చు కానీ బ్రౌజర్‌లో విఫలమవుతుంది.

మీ దృష్టాంతంలో, ప్రీఫ్లైట్ అభ్యర్థన యాక్సెస్ నియంత్రణ తనిఖీని పాస్ చేయలేదని ఎర్రర్ మెసేజ్ సూచిస్తుంది. సర్వర్ యొక్క CORS విధానంలో నిర్దిష్ట శీర్షికలు లేదా పద్ధతులు అనుమతించబడనప్పుడు లేదా సరిగ్గా కాన్ఫిగర్ చేయబడినప్పుడు ఇది సాధారణంగా జరుగుతుంది. CORS కాన్ఫిగరేషన్ సర్వర్ వైపున ఉన్నట్లు కనిపిస్తున్నప్పటికీ, అది బ్రౌజర్ అభ్యర్థనలను ఎలా నిర్వహిస్తుంది అనే విషయంలో నిర్దిష్ట సమస్యలు ఉండవచ్చు.

ఈ వ్యాసం సమస్య యొక్క మూల కారణాన్ని అర్థం చేసుకోవడంలో మీకు సహాయం చేస్తుంది మరియు దాన్ని పరిష్కరించడానికి సాధ్యమైన పరిష్కారాల ద్వారా మీకు మార్గనిర్దేశం చేస్తుంది CORS లోపం మీ రియాక్ట్ మరియు స్ప్రింగ్ బూట్ అప్లికేషన్‌లో.

రియాక్ట్ మరియు స్ప్రింగ్ బూట్ అప్లికేషన్‌లలో CORS లోపాలను నిర్వహించడం

పైన అందించిన స్క్రిప్ట్‌లు సమస్యను పరిష్కరించే లక్ష్యంతో ఉన్నాయి CORS లోపాలు రియాక్ట్ ఫ్రంటెండ్ మరియు స్ప్రింగ్ బూట్ బ్యాకెండ్ సెటప్‌లో. 'http://localhost:8081'లో హోస్ట్ చేయబడిన ఫ్రంటెండ్, 'http://localhost:8080'లో హోస్ట్ చేయబడిన స్ప్రింగ్ బూట్ APIకి GET అభ్యర్థనను చేయడానికి ప్రయత్నించినప్పుడు లోపం సంభవిస్తుంది. అనధికారిక క్రాస్-ఆరిజిన్ అభ్యర్థనలను నిరోధించడానికి బ్రౌజర్‌లు కఠినమైన భద్రతా నియమాలను అమలు చేస్తాయి, అందుకే ఈ CORS విధానాలు ఉన్నాయి. ది WebMvcConfigurer స్ప్రింగ్ బూట్ బ్యాకెండ్ కాన్ఫిగరేషన్‌లోని క్లాస్ నిర్దిష్ట మూలాలు మరియు పద్ధతులను అనుమతించే CORS నియమాలను నిర్వచించడంలో సహాయపడుతుంది, చివరికి సమస్యను పరిష్కరిస్తుంది.

బ్యాకెండ్‌లో, `CorsConfig.java` ఫైల్ స్ప్రింగ్ బూట్ కాన్ఫిగరేషన్ క్లాస్‌ను నిర్వచిస్తుంది. ది @బీన్ మరియు @ఓవర్‌రైడ్ CORS కాన్ఫిగరేషన్‌ను ఇంజెక్ట్ చేయడానికి మరియు అనుకూలీకరించడానికి ఉల్లేఖనాలు ఉపయోగించబడతాయి. `addCorsMappings()` పద్ధతిలో, `allowedOrigins()` ఫంక్షన్ స్పష్టంగా 'http://localhost:8081' నుండి అభ్యర్థనలను అనుమతిస్తుంది, బ్రౌజర్ ఈ మూలాన్ని విశ్వసనీయ మూలంగా గుర్తిస్తుందని నిర్ధారిస్తుంది. `అనుమతించిన పద్ధతులు()` చేర్చడం వలన GET, POST మరియు OPTIONSతో సహా అన్ని HTTP పద్ధతులు అనుమతించబడతాయని నిర్ధారిస్తుంది. ఇది చాలా ముఖ్యమైనది ఎందుకంటే బ్రౌజర్‌లు సాధారణంగా అసలు GET అభ్యర్థన అనుమతించబడిందో లేదో తనిఖీ చేయడానికి ప్రీఫ్లైట్ OPTIONS అభ్యర్థనను పంపుతాయి.

ఫ్రంటెండ్‌లో, రియాక్ట్ ఉపయోగించి అభ్యర్థనలను నిర్వహిస్తుంది యాక్సియోస్, ప్రముఖ HTTP క్లయింట్. `ProjectPage.tsx` ఫైల్ యొక్క `fetchData` ఫంక్షన్‌లో, `axios.get()` ఫంక్షన్ స్ప్రింగ్ బూట్ బ్యాకెండ్‌కు GET అభ్యర్థనను పంపుతుంది. `విత్ క్రెడెన్షియల్స్` ఎంపిక ఒప్పుకు సెట్ చేయబడింది, ఇది కుక్కీలు మరియు ప్రామాణీకరణ ఆధారాలను అభ్యర్థనతో పంపడానికి అనుమతిస్తుంది. అదనంగా, అభ్యర్థన సరిగ్గా ప్రామాణీకరించబడిందని నిర్ధారిస్తూ, వినియోగదారు టోకెన్‌ను పాస్ చేయడానికి ఆథరైజేషన్ హెడర్ చేర్చబడింది. ఈ కాన్ఫిగరేషన్‌లు లేకుండా, భద్రతా కారణాల వల్ల బ్రౌజర్ అభ్యర్థనను బ్లాక్ చేస్తుంది.

చివరగా, యూనిట్ టెస్ట్ ఫైల్, `CorsTest.java`, CORS కాన్ఫిగరేషన్ ఆశించిన విధంగా పని చేస్తుందని ధృవీకరిస్తుంది. ఈ పరీక్ష బ్యాకెండ్ APIకి HTTP OPTIONS అభ్యర్థనను అనుకరిస్తుంది, ఇది బ్రౌజర్ ద్వారా చేసిన నిజమైన ప్రీఫ్లైట్ అభ్యర్థనను అనుకరిస్తుంది. ప్రతిస్పందన సరైన శీర్షికలను కలిగి ఉందో లేదో పరీక్ష తనిఖీ చేస్తుంది యాక్సెస్-నియంత్రణ-అనుమతించు-మూలం, ఇది ఫ్రంటెండ్ నుండి క్రాస్-ఆరిజిన్ అభ్యర్థనలను అనుమతిస్తుంది. `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"));
   }
}

భద్రత మరియు API డిజైన్ సందర్భంలో CORSని అన్వేషించడం

వ్యవహరించేటప్పుడు CORS (క్రాస్-ఆరిజిన్ రిసోర్స్ షేరింగ్) ఆధునిక వెబ్ అప్లికేషన్‌లలో, దాని వెనుక ఉన్న భద్రతాపరమైన చిక్కులను అర్థం చేసుకోవడం చాలా ముఖ్యం. వినియోగదారుల తరపున అనధికారిక API అభ్యర్థనలు చేయకుండా హానికరమైన వెబ్‌సైట్‌లను నిరోధించడానికి బ్రౌజర్‌ల ద్వారా CORS భద్రతా చర్యగా అమలు చేయబడుతుంది. ప్రామాణీకరణ టోకెన్‌లు మరియు వినియోగదారు ఆధారాలు వంటి ఫ్రంటెండ్ మరియు బ్యాకెండ్ సేవల మధ్య సున్నితమైన డేటా మార్పిడి చేయబడిన సందర్భాలలో ఇది చాలా ముఖ్యమైనది. స్ప్రింగ్ బూట్ బ్యాకెండ్‌లో CORSని సెటప్ చేస్తున్నప్పుడు, రక్షిత వనరులను యాక్సెస్ చేయడానికి విశ్వసనీయ మూలాలను మాత్రమే అనుమతించడం చాలా అవసరం, ఇది సిస్టమ్ ఆర్కిటెక్చర్‌లో సెక్యూరిటీ కాన్ఫిగరేషన్‌ను కీలక అంశంగా చేస్తుంది.

మరొక కీలకమైన అంశం ప్రీఫ్లైట్ అభ్యర్థనలను నిర్వహించడం, అవి అసలు GET లేదా POST అభ్యర్థనకు ముందు బ్రౌజర్ చేసిన స్వయంచాలక అభ్యర్థనలు. సర్వర్ క్రాస్-ఆరిజిన్ అభ్యర్థనలను అనుమతిస్తుంది మరియు నిర్దిష్ట శీర్షికలు లేదా పద్ధతులకు మద్దతు ఇస్తుందో లేదో క్లయింట్ నిర్ధారించాల్సిన అవసరం వచ్చినప్పుడు ఇది జరుగుతుంది. కొన్ని సందర్భాల్లో, వీటిని నిర్వహించడంలో తప్పు కాన్ఫిగరేషన్‌లు ప్రీఫ్లైట్ అభ్యర్థనలు పోస్ట్‌మాన్ వంటి సాధనాల్లో వాస్తవ అభ్యర్థన బాగా పనిచేసినప్పుడు కూడా సమస్యలను కలిగిస్తుంది, ఫలితంగా CORS లోపాలు ఏర్పడతాయి. స్ప్రింగ్ బూట్ యొక్క `CorsRegistry`ని సరైన హెడర్‌లు మరియు పద్ధతులతో కాన్ఫిగర్ చేయడం వలన ప్రీఫ్లైట్ అభ్యర్థనలు సరిగ్గా ప్రాసెస్ చేయబడతాయని నిర్ధారిస్తుంది, ఇది ఫ్రంటెండ్ మరియు బ్యాకెండ్ మధ్య సున్నితమైన పరస్పర చర్యను అనుమతిస్తుంది.

అంతేకాకుండా, CORS హ్యాండ్లింగ్ స్థిరంగా ఉండకూడదు లేదా అన్నింటికీ ఒకే పరిమాణంలో ఉండకూడదు. మైక్రోసర్వీస్‌లతో నిర్వహించబడే డైనమిక్ పరిసరాలలో, వివిధ APIలు వేర్వేరు భద్రతా అవసరాలను కలిగి ఉండవచ్చు. కొన్ని APIలు కొన్ని పద్ధతులను మాత్రమే బహిర్గతం చేయాల్సి ఉంటుంది, అయితే మరికొన్ని మూలాలపై కఠినమైన నియంత్రణ అవసరం కావచ్చు. ఇక్కడే ప్రతి ముగింపు బిందువు కోసం CORS కాన్ఫిగరేషన్‌ను చక్కగా ట్యూన్ చేయడం ముఖ్యం. సరైన CORS నిర్వహణ అనవసరమైన ప్రీఫ్లైట్ అభ్యర్థనలను తగ్గించడం ద్వారా మరియు సున్నితమైన వినియోగదారు పరస్పర చర్యను నిర్ధారించడం ద్వారా API పనితీరును ఆప్టిమైజ్ చేయడంలో కూడా సహాయపడుతుంది.