ری ایکٹ اور اسپرنگ بوٹ CORS کے مسائل کو درست کرنا: بلاک شدہ GET درخواست

اسپرنگ بوٹ اور ری ایکٹ ایپس میں CORS کی خرابیوں کو سمجھنا

استعمال کرتے ہوئے ویب ایپلیکیشنز تیار کرتے وقت رد عمل فرنٹ اینڈ کے لیے اور اسپرنگ بوٹ پسدید کے لیے، ڈویلپرز کا ایک عام مسئلہ CORS کی بدنام زمانہ خرابی ہے۔ یہ خرابی اس وقت ہوتی ہے جب براؤزر سیکیورٹی وجوہات کی بنا پر کسی درخواست کو روکتا ہے، خاص طور پر جب کسی مختلف پورٹ یا ڈومین پر میزبان بیک اینڈ سروس سے رابطہ قائم کرنے کی کوشش کی جاتی ہے۔ اس صورت میں، آپ ایک بناتے وقت CORS کے مسئلے سے نمٹ رہے ہیں۔ درخواست حاصل کریں۔ اسپرنگ بوٹ API پر ردعمل سے۔

غلطی کا پیغام عام طور پر اس بات کی نشاندہی کرتا ہے کہ براؤزر آپ کی درخواست کو روک رہا ہے کیونکہ رسائی-کنٹرول-اجازت-اصل ہیڈر یا تو غائب ہے یا غلط طریقے سے ترتیب دیا گیا ہے۔ یہ قابل غور ہے کہ ٹولز جیسے ڈاکیا ان حفاظتی پابندیوں کو نافذ نہ کریں، یہی وجہ ہے کہ آپ کی درخواست پوسٹ مین میں بالکل کام کر سکتی ہے لیکن براؤزر میں ناکام ہو سکتی ہے۔

آپ کے منظر نامے میں، غلطی کا پیغام اس بات کی نشاندہی کرتا ہے کہ پری فلائٹ کی درخواست رسائی کنٹرول چیک کو پاس نہیں کرتی ہے۔ یہ عام طور پر اس وقت ہوتا ہے جب سرور کی CORS پالیسی میں کچھ ہیڈرز یا طریقوں کی اجازت نہ ہو یا مناسب طریقے سے کنفیگر نہ ہو۔ اگرچہ CORS کنفیگریشن سرور سائیڈ پر موجود دکھائی دیتی ہے، اس میں مخصوص مسائل ہوسکتے ہیں کہ یہ براؤزر کی درخواستوں کو کیسے ہینڈل کرتا ہے۔

یہ مضمون آپ کو مسئلے کی بنیادی وجہ کو سمجھنے میں مدد کرے گا اور اس کو حل کرنے کے لیے ممکنہ حل کے ذریعے آپ کی رہنمائی کرے گا۔ CORS غلطی آپ کے ری ایکٹ اور اسپرنگ بوٹ ایپلی کیشن میں۔

رد عمل اور اسپرنگ بوٹ ایپلی کیشنز میں CORS کی خرابیوں کو ہینڈل کرنا

اوپر فراہم کردہ اسکرپٹ کا مقصد مسئلہ کو حل کرنا ہے۔ CORS کی غلطیاں ری ایکٹ فرنٹ اینڈ اور اسپرنگ بوٹ بیک اینڈ سیٹ اپ میں۔ خرابی اس وقت ہوتی ہے جب 'http://localhost:8081' پر میزبان فرنٹ اینڈ، 'http://localhost:8080' پر ہوسٹ کردہ Spring Boot API کو GET کی درخواست کرنے کی کوشش کرتا ہے۔ براؤزر غیر مجاز کراس اوریجن درخواستوں کو روکنے کے لیے سخت حفاظتی قوانین نافذ کرتے ہیں، اسی لیے یہ CORS پالیسیاں موجود ہیں۔ دی WebMvcConfigurer اسپرنگ بوٹ بیک اینڈ کنفیگریشن میں کلاس CORS کے اصولوں کی وضاحت کرنے میں مدد کرتی ہے جو مخصوص اصل اور طریقوں کی اجازت دیتے ہیں، بالآخر مسئلہ کو حل کرتے ہیں۔

بیک اینڈ میں، `CorsConfig.java` فائل اسپرنگ بوٹ کنفیگریشن کلاس کی وضاحت کرتی ہے۔ دی @بین اور @Override تشریحات کا استعمال CORS کنفیگریشن کو انجیکشن اور اپنی مرضی کے مطابق کرنے کے لیے کیا جاتا ہے۔ `addCorsMappings()` طریقہ میں، `allowedOrigins()` فنکشن واضح طور پر 'http://localhost:8081' سے درخواستوں کی اجازت دیتا ہے، اس بات کو یقینی بناتے ہوئے کہ براؤزر اس اصلیت کو ایک قابل اعتماد ذریعہ کے طور پر پہچانتا ہے۔ `allowedMethods()` کی شمولیت یقینی بناتی ہے کہ تمام HTTP طریقوں بشمول GET، POST اور OPTIONS کی اجازت ہے۔ یہ بہت اہم ہے کیونکہ براؤزر عام طور پر یہ چیک کرنے کے لیے پری فلائٹ آپشنز کی درخواست بھیجتے ہیں کہ آیا اصل GET درخواست کی اجازت ہے۔

فرنٹ اینڈ پر، React کا استعمال کرتے ہوئے درخواستوں کو ہینڈل کرتا ہے۔ محور، ایک مقبول 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 (کراس اوریجن ریسورس شیئرنگ) جدید ویب ایپلیکیشنز میں، اس کے پیچھے حفاظتی مضمرات کو سمجھنا بہت ضروری ہے۔ CORS کو براؤزرز کے ذریعے حفاظتی اقدام کے طور پر لاگو کیا جاتا ہے تاکہ نقصان دہ ویب سائٹس کو صارفین کی جانب سے غیر مجاز API کی درخواستیں کرنے سے روکا جا سکے۔ یہ خاص طور پر ان منظرناموں میں اہم ہے جہاں حساس ڈیٹا کا تبادلہ فرنٹ اینڈ اور بیک اینڈ سروسز کے درمیان ہوتا ہے، جیسے کہ تصدیقی ٹوکنز اور صارف کی اسناد۔ اسپرنگ بوٹ بیک اینڈ میں CORS ترتیب دیتے وقت، یہ ضروری ہے کہ صرف بھروسہ مند اصلی افراد کو محفوظ وسائل تک رسائی کی اجازت دی جائے، جس سے سیکیورٹی کی ترتیب سسٹم کے فن تعمیر کا ایک اہم عنصر بن جائے۔

ایک اور اہم پہلو پری فلائٹ درخواستوں کو ہینڈل کرنا ہے، جو کہ اصل GET یا POST درخواست سے پہلے براؤزر کی طرف سے کی گئی خودکار درخواستیں ہیں۔ یہ اس وقت ہوتا ہے جب کلائنٹ کو اس بات کی تصدیق کرنے کی ضرورت ہوتی ہے کہ آیا سرور کراس اوریجن درخواستوں کی اجازت دیتا ہے اور مخصوص ہیڈر یا طریقوں کی حمایت کرتا ہے۔ کچھ معاملات میں، ان کو سنبھالنے میں غلط کنفیگریشنز پری فلائٹ کی درخواستیں مسائل پیدا کر سکتے ہیں، جس کے نتیجے میں CORS کی خرابیاں پیدا ہوتی ہیں یہاں تک کہ جب اصل درخواست پوسٹ مین جیسے ٹولز میں ٹھیک کام کرتی ہے۔ اسپرنگ بوٹ کی `CorsRegistry` کو صحیح ہیڈر اور طریقوں کے ساتھ ترتیب دینا یقینی بناتا ہے کہ پری فلائٹ کی درخواستوں پر صحیح طریقے سے کارروائی ہوتی ہے، جس سے فرنٹ اینڈ اور بیک اینڈ کے درمیان ہموار تعامل ہوتا ہے۔

مزید یہ کہ، CORS ہینڈلنگ جامد یا ایک ہی سائز کے فٹ ہونے والی نہیں ہونی چاہیے۔ مائیکرو سروسز کے ساتھ منظم ماحول جیسے متحرک ماحول میں، مختلف APIs میں مختلف حفاظتی تقاضے ہو سکتے ہیں۔ کچھ APIs کو صرف کچھ طریقوں کو بے نقاب کرنے کی ضرورت ہو سکتی ہے، جبکہ دوسروں کو اصل پر سخت کنٹرول کی ضرورت ہو سکتی ہے۔ یہ وہ جگہ ہے جہاں ہر اختتامی نقطہ کے لئے CORS کنفیگریشن کو ٹھیک کرنا اہم ہو جاتا ہے۔ مناسب CORS مینجمنٹ غیر ضروری پری فلائٹ درخواستوں کو کم کرکے اور صارف کے ہموار تعامل کو یقینی بنا کر API کی کارکردگی کو بہتر بنانے میں بھی مدد کرتا ہے۔