റിയാക്‌റ്റും സ്പ്രിംഗ് ബൂട്ട് 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 ഓപ്‌ഷനുകളുടെ അഭ്യർത്ഥനയെ അനുകരിക്കുന്നു, ഇത് ബ്രൗസർ നടത്തിയ യഥാർത്ഥ പ്രിഫ്ലൈറ്റ് അഭ്യർത്ഥനയെ അനുകരിക്കുന്നു. പ്രതികരണത്തിൽ ശരിയായ തലക്കെട്ടുകൾ അടങ്ങിയിട്ടുണ്ടോ എന്ന് പരിശോധന പരിശോധിക്കുന്നു ആക്സസ്-കൺട്രോൾ-അനുവദിക്കുക-ഉത്ഭവം, ഇത് ഫ്രണ്ടെൻഡിൽ നിന്നുള്ള ക്രോസ്-ഒറിജിൻ അഭ്യർത്ഥനകൾ അനുവദിക്കുന്നു. പ്രീഫ്ലൈറ്റ് അഭ്യർത്ഥനകളോട് സെർവർ ശരിയായി പ്രതികരിക്കുന്നുവെന്ന് `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 കോൺഫിഗറേഷൻ ഫൈൻ-ട്യൂണിംഗ് പ്രധാനമാകുന്നത്. അനാവശ്യമായ പ്രിഫ്ലൈറ്റ് അഭ്യർത്ഥനകൾ കുറയ്ക്കുകയും സുഗമമായ ഉപയോക്തൃ ഇടപെടൽ ഉറപ്പാക്കുകയും ചെയ്തുകൊണ്ട് API പ്രകടനം ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിനും ശരിയായ CORS മാനേജ്മെൻ്റ് സഹായിക്കുന്നു.