ফিক্সিং রিঅ্যাক্ট এবং স্প্রিং বুট CORS সমস্যা: ব্লক করা GET অনুরোধ

স্প্রিং বুট এবং প্রতিক্রিয়া অ্যাপ্লিকেশনগুলিতে CORS ত্রুটিগুলি বোঝা

ব্যবহার করে ওয়েব অ্যাপ্লিকেশন বিকাশ করার সময় প্রতিক্রিয়া ফ্রন্টএন্ডের জন্য এবং বসন্ত বুট ব্যাকএন্ডের জন্য, ডেভেলপারদের একটি সাধারণ সমস্যা হল কুখ্যাত CORS ত্রুটি। এই ত্রুটিটি ঘটে যখন ব্রাউজার নিরাপত্তার কারণে একটি অনুরোধ ব্লক করে, বিশেষ করে যখন একটি ভিন্ন পোর্ট বা ডোমেনে হোস্ট করা ব্যাকএন্ড পরিষেবার সাথে সংযোগ করার চেষ্টা করা হয়। এই ক্ষেত্রে, একটি তৈরি করার সময় আপনি একটি CORS সমস্যা নিয়ে কাজ করছেন অনুরোধ পান প্রতিক্রিয়া থেকে একটি স্প্রিং বুট এপিআই।

ত্রুটি বার্তা সাধারণত নির্দেশ করে যে ব্রাউজার আপনার অনুরোধ ব্লক করছে কারণ অ্যাক্সেস-নিয়ন্ত্রণ-অনুমতি-উৎপত্তি হেডার হয় অনুপস্থিত বা ভুলভাবে কনফিগার করা হয়েছে। এটা যেমন সরঞ্জাম লক্ষনীয় মূল্য পোস্টম্যান এই নিরাপত্তা বিধিনিষেধ প্রয়োগ করবেন না, যে কারণে আপনার অনুরোধ পোস্টম্যানে পুরোপুরি কাজ করতে পারে কিন্তু ব্রাউজারে ব্যর্থ হতে পারে।

আপনার দৃশ্যে, ত্রুটি বার্তাটি নির্দেশ করে যে একটি প্রিফ্লাইট অনুরোধ অ্যাক্সেস কন্ট্রোল চেক পাস করে না। এটি সাধারণত ঘটে যখন নির্দিষ্ট শিরোনাম বা পদ্ধতিগুলি অনুমোদিত নয় বা সার্ভারের CORS নীতিতে সঠিকভাবে কনফিগার করা হয় না। যদিও CORS কনফিগারেশন সার্ভারের পাশে রয়েছে বলে মনে হচ্ছে, এটি ব্রাউজার অনুরোধগুলি কীভাবে পরিচালনা করে তা নিয়ে নির্দিষ্ট সমস্যা থাকতে পারে।

এই নিবন্ধটি আপনাকে সমস্যার মূল কারণ বুঝতে সাহায্য করবে এবং সমাধানের সম্ভাব্য সমাধানগুলির মাধ্যমে আপনাকে গাইড করবে CORS ত্রুটি আপনার প্রতিক্রিয়া এবং স্প্রিং বুট অ্যাপ্লিকেশনে।

প্রতিক্রিয়া এবং স্প্রিং বুট অ্যাপ্লিকেশনগুলিতে CORS ত্রুটিগুলি পরিচালনা করা

উপরে প্রদত্ত স্ক্রিপ্টগুলির সমস্যা সমাধানের লক্ষ্য CORS ত্রুটি একটি প্রতিক্রিয়া ফ্রন্টএন্ড এবং স্প্রিং বুট ব্যাকএন্ড সেটআপে। ত্রুটি ঘটে যখন 'http://localhost:8081'-এ হোস্ট করা ফ্রন্টএন্ড, 'http://localhost:8080'-এ হোস্ট করা স্প্রিং বুট API-এ একটি GET অনুরোধ করার চেষ্টা করে। ব্রাউজারগুলি অননুমোদিত ক্রস-অরিজিন অনুরোধগুলি প্রতিরোধ করতে কঠোর নিরাপত্তা নিয়ম প্রয়োগ করে, এই কারণেই এই CORS নীতিগুলি বিদ্যমান। দ WebMvc কনফিগারার স্প্রিং বুট ব্যাকএন্ড কনফিগারেশনের ক্লাস CORS নিয়মগুলিকে সংজ্ঞায়িত করতে সাহায্য করে যা নির্দিষ্ট উত্স এবং পদ্ধতির অনুমতি দেয়, শেষ পর্যন্ত সমস্যাটির সমাধান করে।

ব্যাকএন্ডে, `CorsConfig.java` ফাইলটি একটি স্প্রিং বুট কনফিগারেশন ক্লাস সংজ্ঞায়িত করে। দ @বিন এবং @ওভাররাইড টীকাগুলি ইনজেকশন এবং CORS কনফিগারেশন কাস্টমাইজ করতে ব্যবহৃত হয়। `addCorsMappings()` পদ্ধতিতে, `allowedOrigins()` ফাংশন স্পষ্টভাবে 'http://localhost:8081' থেকে অনুরোধের অনুমতি দেয়, নিশ্চিত করে যে ব্রাউজার এই উৎসটিকে একটি বিশ্বস্ত উৎস হিসেবে স্বীকৃতি দিয়েছে। 'অনুমোদিত পদ্ধতি()' অন্তর্ভুক্তি নিশ্চিত করে যে GET, POST এবং OPTIONS সহ সমস্ত HTTP পদ্ধতি অনুমোদিত৷ এটি অত্যন্ত গুরুত্বপূর্ণ কারণ প্রকৃত GET অনুরোধ অনুমোদিত কিনা তা পরীক্ষা করার জন্য ব্রাউজারগুলি সাধারণত একটি preflight OPTIONS অনুরোধ পাঠায়।

ফ্রন্টএন্ডে, প্রতিক্রিয়া ব্যবহার করে অনুরোধগুলি পরিচালনা করে অ্যাক্সিওস, একটি জনপ্রিয় HTTP ক্লায়েন্ট। `ProjectPage.tsx` ফাইলের `fetchData` ফাংশনে, `axios.get()` ফাংশন স্প্রিং বুট ব্যাকএন্ডে একটি GET অনুরোধ পাঠায়। 'সাথে শংসাপত্র' বিকল্পটি সত্য হিসাবে সেট করা হয়েছে, অনুরোধের সাথে কুকি এবং প্রমাণীকরণ শংসাপত্র পাঠানোর অনুমতি দেয়। উপরন্তু, ব্যবহারকারীর টোকেন পাস করার জন্য অনুমোদনের শিরোনাম অন্তর্ভুক্ত করা হয়েছে, যাতে অনুরোধটি সঠিকভাবে প্রমাণীকরণ করা হয়। এই কনফিগারেশনগুলি ছাড়া, নিরাপত্তার কারণে ব্রাউজার অনুরোধটি ব্লক করবে।

সবশেষে, ইউনিট টেস্ট ফাইল, `CorsTest.java`, যাচাই করে যে CORS কনফিগারেশন প্রত্যাশিতভাবে কাজ করছে। এই পরীক্ষাটি ব্যাকএন্ড এপিআই-তে একটি 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 অনুরোধের আগে ব্রাউজার দ্বারা করা স্বয়ংক্রিয় অনুরোধ। এটি ঘটে যখন ক্লায়েন্টকে নিশ্চিত করতে হয় যে সার্ভার ক্রস-অরিজিন অনুরোধের অনুমতি দেয় এবং নির্দিষ্ট শিরোনাম বা পদ্ধতি সমর্থন করে। কিছু ক্ষেত্রে, এইগুলি পরিচালনার ক্ষেত্রে ভুল কনফিগারেশন preflight অনুরোধ সমস্যা সৃষ্টি করতে পারে, যার ফলে CORS ত্রুটি দেখা দিতে পারে এমনকি যখন প্রকৃত অনুরোধ পোস্টম্যানের মতো সরঞ্জামগুলিতে ভাল কাজ করে। সঠিক শিরোনাম এবং পদ্ধতিগুলির সাথে স্প্রিং বুটের `CorsRegistry` কনফিগার করা নিশ্চিত করে যে প্রিফ্লাইট অনুরোধগুলি সঠিকভাবে প্রক্রিয়া করা হয়েছে, ফ্রন্টএন্ড এবং ব্যাকএন্ডের মধ্যে মসৃণ মিথস্ক্রিয়াকে অনুমতি দেয়।

অধিকন্তু, CORS হ্যান্ডলিং স্থির বা এক-আকার-ফিট-সমস্ত হওয়া উচিত নয়। মাইক্রোসার্ভিসেসের মতো গতিশীল পরিবেশে, বিভিন্ন API-এর বিভিন্ন নিরাপত্তা প্রয়োজনীয়তা থাকতে পারে। কিছু এপিআই-এর শুধুমাত্র কিছু নির্দিষ্ট পদ্ধতি প্রকাশ করার প্রয়োজন হতে পারে, অন্যদের উত্সের উপর কঠোর নিয়ন্ত্রণের প্রয়োজন হতে পারে। এখানেই প্রতিটি এন্ডপয়েন্টের জন্য CORS কনফিগারেশনের ফাইন-টিউনিং গুরুত্বপূর্ণ হয়ে ওঠে। সঠিক CORS ব্যবস্থাপনা অপ্রয়োজনীয় প্রিফ্লাইট অনুরোধগুলি হ্রাস করে এবং মসৃণ ব্যবহারকারীর মিথস্ক্রিয়া নিশ্চিত করে API কার্যক্ষমতা অপ্টিমাইজ করতে সহায়তা করে।