ரியாக்ட் மற்றும் ஸ்பிரிங் பூட் CORS சிக்கல்களை சரிசெய்தல்: GET கோரிக்கை தடுக்கப்பட்டது

ஸ்பிரிங் பூட் மற்றும் ரியாக்ட் ஆப்ஸில் உள்ள CORS பிழைகளைப் புரிந்துகொள்வது

பயன்படுத்தி இணைய பயன்பாடுகளை உருவாக்கும் போது எதிர்வினையாற்று முன்பக்கம் மற்றும் ஸ்பிரிங் பூட் பின்தளத்தில், டெவலப்பர்கள் எதிர்கொள்ளும் பொதுவான பிரச்சினை பிரபலமற்ற CORS பிழை. பாதுகாப்பு காரணங்களுக்காக உலாவி கோரிக்கையைத் தடுக்கும் போது, ​​குறிப்பாக வேறு போர்ட் அல்லது டொமைனில் ஹோஸ்ட் செய்யப்பட்ட பின்தள சேவையுடன் இணைக்க முயற்சிக்கும்போது இந்தப் பிழை ஏற்படுகிறது. இந்த வழக்கில், நீங்கள் ஒரு CORS சிக்கலைக் கையாளுகிறீர்கள் கோரிக்கையைப் பெறவும் ரியாக்ட் முதல் ஸ்பிரிங் பூட் ஏபிஐ வரை.

பிழைச் செய்தி பொதுவாக உலாவி உங்கள் கோரிக்கையைத் தடுப்பதைக் குறிக்கிறது Access-Control-Allow-Origin தலைப்பு காணவில்லை அல்லது தவறாக உள்ளமைக்கப்பட்டுள்ளது. போன்ற கருவிகள் என்பது குறிப்பிடத்தக்கது தபால்காரர் இந்த பாதுகாப்புக் கட்டுப்பாடுகளைச் செயல்படுத்த வேண்டாம், அதனால்தான் உங்கள் கோரிக்கை போஸ்ட்மேனில் சரியாக வேலை செய்யக்கூடும், ஆனால் உலாவியில் தோல்வியடையும்.

உங்கள் சூழ்நிலையில், அணுகல் கட்டுப்பாட்டுச் சோதனையில் ப்ரீஃப்லைட் கோரிக்கை கடந்து செல்லவில்லை என்பதை பிழைச் செய்தி குறிக்கிறது. சில தலைப்புகள் அல்லது முறைகள் அனுமதிக்கப்படாதபோது அல்லது சர்வரின் 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 கோரிக்கையை உருவகப்படுத்துகிறது, இது உலாவியால் செய்யப்படும் உண்மையான ப்ரீஃப்லைட் கோரிக்கையைப் பிரதிபலிக்கிறது. பதிலில் சரியான தலைப்புகள் உள்ளதா என சோதனை சரிபார்க்கிறது Access-Control-Allow-Origin, இது முன்பக்கத்திலிருந்து குறுக்கு மூல கோரிக்கைகளை அனுமதிக்கிறது. `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 பிழைகள் ஏற்படலாம். ஸ்பிரிங் பூட்டின் `கோர்ஸ் ரெஜிஸ்ட்ரி`யை சரியான தலைப்புகள் மற்றும் முறைகளுடன் கட்டமைப்பது, ப்ரீஃப்லைட் கோரிக்கைகள் சரியாகச் செயலாக்கப்படுவதை உறுதிசெய்கிறது, இது ஃப்ரண்ட்எண்ட் மற்றும் பேக்கெண்ட் இடையே சுமூகமான தொடர்புகளை அனுமதிக்கிறது.

மேலும், CORS கையாளுதல் நிலையானதாகவோ அல்லது ஒரே அளவாகவோ இருக்கக்கூடாது. மைக்ரோ சர்வீஸ் மூலம் நிர்வகிக்கப்படுவது போன்ற மாறும் சூழல்களில், வெவ்வேறு ஏபிஐகளுக்கு வெவ்வேறு பாதுகாப்புத் தேவைகள் இருக்கலாம். சில APIகள் சில முறைகளை மட்டுமே வெளிப்படுத்த வேண்டியிருக்கும், மற்றவைக்கு மூலத்தின் மீது கடுமையான கட்டுப்பாடு தேவைப்படலாம். ஒவ்வொரு முனைப்புள்ளிக்கும் CORS உள்ளமைவை நன்றாகச் சரிசெய்வது இங்குதான் முக்கியமானது. முறையான CORS மேலாண்மை தேவையற்ற ப்ரீஃப்லைட் கோரிக்கைகளை குறைப்பதன் மூலம் API செயல்திறனை மேம்படுத்த உதவுகிறது மற்றும் மென்மையான பயனர் தொடர்புகளை உறுதி செய்கிறது.