ફિક્સિંગ રિએક્ટ અને સ્પ્રિંગ બૂટ CORS મુદ્દાઓ: અવરોધિત GET વિનંતી

સ્પ્રિંગ બૂટ અને પ્રતિક્રિયા એપ્લિકેશન્સમાં CORS ભૂલોને સમજવી

ઉપયોગ કરીને વેબ એપ્લિકેશનો વિકસાવતી વખતે પ્રતિક્રિયા આપો અગ્રભાગ માટે અને વસંત બુટ બેકએન્ડ માટે, વિકાસકર્તાઓને એક સામાન્ય સમસ્યાનો સામનો કરવો પડે છે તે કુખ્યાત CORS ભૂલ છે. આ ભૂલ ત્યારે થાય છે જ્યારે બ્રાઉઝર સુરક્ષા કારણોસર વિનંતીને અવરોધિત કરે છે, ખાસ કરીને જ્યારે કોઈ અલગ પોર્ટ અથવા ડોમેન પર હોસ્ટ કરેલ બેકએન્ડ સેવા સાથે કનેક્ટ કરવાનો પ્રયાસ કરવામાં આવે છે. આ કિસ્સામાં, તમે બનાવતી વખતે CORS સમસ્યા સાથે કામ કરી રહ્યાં છો વિનંતી મેળવો સ્પ્રિંગ બૂટ API પર પ્રતિક્રિયાથી.

ભૂલ સંદેશ સામાન્ય રીતે સૂચવે છે કે બ્રાઉઝર તમારી વિનંતીને અવરોધિત કરી રહ્યું છે કારણ કે ઍક્સેસ-નિયંત્રણ-મંજૂરી-મૂળ હેડર ક્યાં તો ખૂટે છે અથવા ખોટી રીતે ગોઠવેલ છે. તે નોંધવું યોગ્ય છે કે સાધનો જેવા પોસ્ટમેન આ સુરક્ષા પ્રતિબંધોને લાગુ કરશો નહીં, તેથી જ તમારી વિનંતી પોસ્ટમેનમાં સંપૂર્ણ રીતે કામ કરી શકે છે પરંતુ બ્રાઉઝરમાં નિષ્ફળ જશે.

તમારા દૃશ્યમાં, ભૂલ સંદેશ સૂચવે છે કે પ્રીફ્લાઇટ વિનંતી એક્સેસ કંટ્રોલ ચેક પાસ કરતી નથી. આ સામાન્ય રીતે ત્યારે થાય છે જ્યારે સર્વરની CORS નીતિમાં અમુક હેડરો અથવા પદ્ધતિઓને મંજૂરી આપવામાં આવતી નથી અથવા યોગ્ય રીતે ગોઠવેલ નથી. જ્યારે CORS રૂપરેખાંકન સર્વર બાજુ પર લાગે છે, ત્યારે તે બ્રાઉઝર વિનંતીઓને કેવી રીતે હેન્ડલ કરે છે તેમાં ચોક્કસ સમસ્યાઓ હોઈ શકે છે.

આ લેખ તમને સમસ્યાના મૂળ કારણને સમજવામાં મદદ કરશે અને તેને ઉકેલવા માટે શક્ય ઉકેલો દ્વારા માર્ગદર્શન આપશે CORS ભૂલ તમારી પ્રતિક્રિયા અને સ્પ્રિંગ બૂટ એપ્લિકેશનમાં.

પ્રતિક્રિયા અને સ્પ્રિંગ બૂટ એપ્લિકેશનમાં CORS ભૂલોનું સંચાલન કરવું

ઉપરોક્ત આપવામાં આવેલ સ્ક્રિપ્ટ્સનો ઉદ્દેશ્ય ની સમસ્યાને હલ કરવાનો છે CORS ભૂલો રિએક્ટ ફ્રન્ટએન્ડ અને સ્પ્રિંગ બૂટ બેકએન્ડ સેટઅપમાં. ભૂલ ત્યારે થાય છે જ્યારે 'http://localhost:8081' પર હોસ્ટ કરેલ ફ્રન્ટએન્ડ, 'http://localhost:8080' પર હોસ્ટ કરેલ સ્પ્રિંગ બૂટ API ને GET વિનંતી કરવાનો પ્રયાસ કરે છે. બ્રાઉઝર્સ અનધિકૃત ક્રોસ-ઓરિજિન વિનંતીઓને રોકવા માટે કડક સુરક્ષા નિયમો લાગુ કરે છે, તેથી જ આ CORS નીતિઓ અસ્તિત્વમાં છે. આ WebMvc Configurer સ્પ્રિંગ બૂટ બેકએન્ડ રૂપરેખાંકનમાં વર્ગ CORS નિયમોને વ્યાખ્યાયિત કરવામાં મદદ કરે છે જે ચોક્કસ મૂળ અને પદ્ધતિઓને મંજૂરી આપે છે, આખરે સમસ્યાનો ઉકેલ લાવે છે.

બેકએન્ડમાં, `CorsConfig.java` ફાઇલ સ્પ્રિંગ બૂટ રૂપરેખાંકન વર્ગને વ્યાખ્યાયિત કરે છે. આ @બીન અને @ઓવરરાઇડ ટીકાઓનો ઉપયોગ CORS રૂપરેખાંકનને ઇન્જેક્ટ કરવા અને કસ્ટમાઇઝ કરવા માટે થાય છે. `addCorsMappings()` પદ્ધતિમાં, `allowedOrigins()` ફંક્શન 'http://localhost:8081' ની વિનંતીઓને સ્પષ્ટપણે મંજૂરી આપે છે, ખાતરી કરીને કે બ્રાઉઝર આ મૂળને વિશ્વસનીય સ્ત્રોત તરીકે ઓળખે છે. `allowedMethods()` નો સમાવેશ એ સુનિશ્ચિત કરે છે કે GET, POST અને OPTIONS સહિતની તમામ HTTP પદ્ધતિઓની પરવાનગી છે. આ નિર્ણાયક છે કારણ કે બ્રાઉઝર્સ સામાન્ય રીતે વાસ્તવિક GET વિનંતીને મંજૂરી છે કે કેમ તે તપાસવા માટે પ્રીફ્લાઇટ OPTIONS વિનંતી મોકલે છે.

ફ્રન્ટએન્ડ પર, React નો ઉપયોગ કરીને વિનંતીઓનું સંચાલન કરે છે એક્સિઓસ, લોકપ્રિય 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 પ્રદર્શનને ઑપ્ટિમાઇઝ કરવામાં પણ મદદ કરે છે.