شرح CORS ولماذا يظهر الخطأ وكيف تحله في Spring Boot | Fullstack Yazan

شرح CORS ولماذا يظهر الخطأ وكيف تحله في Spring Boot | Fullstack Yazan

كود الدرس

إذا كنت مطور ويب، أكيد اتعذبت مرة على الأقل بسبب هالـ error الغريب بالكونسول. درسة رح نفهم شو هو الـ CORS وكيف نحله.

شو يعني CORS

CORS اختصار لـ Cross-Origin Resource Sharing. ببساطة هي آلية بتسمح لموقع موجود على دومين معين يطلب بيانات من دومين ثاني مختلف.

مثلاً إذا عندك Frontend شغال على localhost:3000 وعبيحاول يجيب داتا من Backend على localhost:8080 - هذا الطلب اسمه Cross-Origin Request لأن الـ Origins مختلفين.

ليش بيصير الـ Error

المتصفح بيطبق سياسة أمان اسمها Same Origin Policy. هاي السياسة بتقول إنه الصفحة ما فيها تطلب بيانات إلا من نفس الدومين يلي انطلقت منه.

كيف المتصفح يعرف إنه الطلب جاي من مكان ثاني؟ تلقائياً مع كل طلب بيضيف Header اسمه origin بيحتوي على الـ Origin للموقع الحالي.

السيرفر لما يستقبل الطلب، يرد عليه بـ Header اسمه Access-Control-Allow-Origin:

Access-Control-Allow-Origin: http://localhost:3000

أو بـ Wildcard للسماح لأي أحد:

Access-Control-Allow-Origin: *

إذا السيرفر ما رجع هاد الـ Header، المتصفح بيبلوك الطلب وبتشوف الـ Error هاي بالكونسول:

Access to fetch at 'http://localhost:8080/employees' from origin 'http://localhost:3000'
has been blocked by CORS policy.

الحل دائماً من السيرفر

الحل ما بيكون من الـ Frontend. لازم السيرفر يحدد مين مسموح له يتحدث معه. بالـ Spring Boot بننشئ CorsConfiguration:

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")

اشترك في النشرة البريدية

دروس جديدة، مقالات، وأدوات مباشرة لبريدك.

.cors(cors -> cors.configurationSource(request -> {
    CorsConfiguration config = new CorsConfiguration();
    config.setAllowedOrigins(List.of("http://localhost:3000"));
    config.setAllowedMethods(List.of("GET", "POST", "PUT", "DELETE", "OPTIONS"));
    config.setAllowedHeaders(List.of("*"));
    return config;
}))