إصلاح مشكلات React وSpring Boot CORS: طلب GET المحظور

فهم أخطاء CORS في تطبيقات Spring Boot وReact

عند تطوير تطبيقات الويب باستخدام رد فعل للواجهة الأمامية و التمهيد الربيع بالنسبة للواجهة الخلفية، هناك مشكلة شائعة يواجهها المطورون وهي خطأ CORS سيئ السمعة. يحدث هذا الخطأ عندما يقوم المتصفح بحظر طلب لأسباب أمنية، خاصة عند محاولة الاتصال بخدمة خلفية مستضافة على منفذ أو مجال مختلف. في هذه الحالة، أنت تتعامل مع مشكلة CORS أثناء إنشاء ملف الحصول على الطلب من React إلى Spring Boot API.

تشير رسالة الخطأ عادةً إلى أن المتصفح يحظر طلبك لأن التحكم في الوصول-السماح-الأصل الرأس إما مفقود أو تم تكوينه بشكل غير صحيح. ومن الجدير بالذكر أن الأدوات مثل ساعي البريد لا تفرض هذه القيود الأمنية، ولهذا السبب قد يعمل طلبك بشكل مثالي في Postman ولكنه يفشل في المتصفح.

في السيناريو الخاص بك، تشير رسالة الخطأ إلى أن طلب الاختبار المبدئي لا يجتاز فحص التحكم في الوصول. يحدث هذا عادةً عندما لا يُسمح برؤوس أو طرق معينة أو يتم تكوينها بشكل صحيح في سياسة CORS الخاصة بالخادم. بينما يبدو أن تكوين CORS موجود على جانب الخادم، فقد تكون هناك مشكلات محددة تتعلق بكيفية تعامله مع طلبات المتصفح.

ستساعدك هذه المقالة على فهم السبب الجذري للمشكلة وإرشادك خلال الحلول الممكنة لحل المشكلة خطأ كورس في تطبيق React وSpring Boot.

معالجة أخطاء CORS في تطبيقات React وSpring Boot

تهدف البرامج النصية المذكورة أعلاه إلى حل مشكلة أخطاء كورس في إعداد الواجهة الأمامية React والواجهة الخلفية لـ Spring Boot. يحدث الخطأ عندما تحاول الواجهة الأمامية، المستضافة على "http://localhost:8081"، تقديم طلب GET إلى Spring Boot API المستضافة على "http://localhost:8080". تفرض المتصفحات قواعد أمان صارمة لمنع الطلبات غير المصرح بها عبر الأصل، ولهذا السبب توجد سياسات CORS هذه. ال WebMvcConfigur تساعد الفئة في تكوين الواجهة الخلفية لـ Spring Boot على تحديد قواعد CORS التي تسمح بأصول وأساليب محددة، مما يؤدي في النهاية إلى حل المشكلة.

في الواجهة الخلفية، يحدد الملف `CorsConfig.java` فئة تكوين Spring Boot. ال @فول و @تجاوز تُستخدم التعليقات التوضيحية لإدخال تكوين CORS وتخصيصه. في طريقة `addCorsMappings()`، تسمح وظيفة `allowedOrigins()` بشكل صريح بالطلبات من 'http://localhost:8081'، مما يضمن أن المتصفح يتعرف على هذا الأصل كمصدر موثوق به. يضمن تضمين `allowedMethods()` السماح بجميع أساليب HTTP، بما في ذلك GET وPOST وOPTIONS. يعد هذا أمرًا بالغ الأهمية لأن المتصفحات عادةً ما ترسل طلب OPTIONS للاختبار المبدئي للتحقق مما إذا كان طلب GET الفعلي مسموحًا به.

على الواجهة الأمامية، تعالج React الطلبات باستخدام أكسيوس، عميل HTTP شائع. في وظيفة "fetchData" لملف "ProjectPage.tsx"، ترسل وظيفة "axios.get()" طلب GET إلى الواجهة الخلفية لـ Spring Boot. تم تعيين خيار "withCredentials" على "صحيح"، مما يسمح بإرسال ملفات تعريف الارتباط وبيانات اعتماد المصادقة مع الطلب. بالإضافة إلى ذلك، يتم تضمين رأس التفويض لتمرير الرمز المميز للمستخدم، مما يضمن مصادقة الطلب بشكل صحيح. بدون هذه التكوينات، سيقوم المتصفح بحظر الطلب لأسباب أمنية.

وأخيرًا، يتحقق ملف اختبار الوحدة، `CorsTest.java`، من أن تكوين CORS يعمل كما هو متوقع. يحاكي هذا الاختبار طلب 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"));
   }
}

استكشاف CORS في سياق الأمان وتصميم واجهة برمجة التطبيقات

عند التعامل مع CORS (مشاركة الموارد عبر الأصل) في تطبيقات الويب الحديثة، من المهم فهم الآثار الأمنية الكامنة وراء ذلك. يتم تنفيذ CORS كإجراء أمني بواسطة المتصفحات لمنع مواقع الويب الضارة من تقديم طلبات API غير مصرح بها نيابة عن المستخدمين. وهذا مهم بشكل خاص في السيناريوهات التي يتم فيها تبادل البيانات الحساسة بين خدمات الواجهة الأمامية والخلفية، مثل رموز المصادقة وبيانات اعتماد المستخدم. عند إعداد CORS في الواجهة الخلفية لـ Spring Boot، من الضروري السماح للأصول الموثوقة فقط بالوصول إلى الموارد المحمية، مما يجعل تكوين الأمان عنصرًا أساسيًا في بنية النظام.

جانب آخر مهم هو التعامل مع طلبات الاختبار المبدئي، وهي طلبات تلقائية يقدمها المتصفح قبل طلب GET أو POST الفعلي. يحدث هذا عندما يحتاج العميل إلى تأكيد ما إذا كان الخادم يسمح بالطلبات عبر الأصل ويدعم رؤوس أو طرق محددة. في بعض الحالات، تكوينات خاطئة في التعامل مع هذه طلبات الاختبار المبدئي يمكن أن يسبب مشكلات، مما يؤدي إلى حدوث أخطاء CORS حتى عندما يعمل الطلب الفعلي بشكل جيد في أدوات مثل Postman. يضمن تكوين "CorsRegistry" الخاص بـ Spring Boot بالترويسات والأساليب الصحيحة معالجة طلبات الاختبار المبدئي بشكل صحيح، مما يسمح بالتفاعل السلس بين الواجهة الأمامية والخلفية.

علاوة على ذلك، لا ينبغي أن يكون التعامل مع CORS ثابتًا أو بمقاس واحد يناسب الجميع. في البيئات الديناميكية مثل تلك التي تتم إدارتها باستخدام الخدمات الصغيرة، قد يكون لواجهات برمجة التطبيقات المختلفة متطلبات أمان مختلفة. قد تحتاج بعض واجهات برمجة التطبيقات (API) فقط إلى الكشف عن طرق معينة، بينما قد يتطلب بعضها الآخر تحكمًا أكثر صرامة في الأصول. هذا هو المكان الذي يصبح فيه ضبط تكوين CORS لكل نقطة نهاية أمرًا مهمًا. تساعد إدارة CORS المناسبة أيضًا في تحسين أداء واجهة برمجة التطبيقات (API) عن طريق تقليل طلبات الاختبار المبدئي غير الضرورية وضمان التفاعل السلس للمستخدم.