0

ارسال طلبات xhr إلى الإمتدادات الفرعية محليّاً

مرحبا...

لدي صفحة تحتوي على قائمة من المجلدات.

مثال:

الرابط الرئيسي لإستعراض القائمة 

http://localhost:8080

الرابط الذي اود ارسال طلب له : 

http://example.localhost:8080

حاولت إرسال الطلب بواسطة xhr و fetch ولكن يتم اعتبار المجلد الفرعي مختلف عن الأصل وبالتالي يتم رفض الطلب من قبل المتصفح وكالتالي: 

Access to fetch at 'http://example.localhost:8080/' 
from origin 'http://localhost:8080' has been blocked 
by CORS policy: No 'Access-Control-Allow-Origin' 
header is present on the requested resource. 
If an opaque response serves your needs, 
set the request's mode to 'no-cors' to 
fetch the resource with CORS disabled.

شيفرة الطلب:

async function makeRequest() {
    try {
        const response = await fetch('http://examlpe.localhost:8080', {
            mode : 'cors'
            });

        console.log('status code: ', response.status); // 👉️ 200

        if (!response.ok) {
            console.log(response);
            throw new Error(`Error! status: ${response.status}`);
        }

        const result = await response;
        return result;
    } catch (err) {
        console.log(err);
    }
}

makeRequest();

اذا فعلت كما يطلب المتصفح مني وقمت بالتعديل على نمط الطلب وجعله no-cors احصل على status: 0 (انظر الصورة بالأسفل) مع انه من المفترض ان يكون الstatus 200 اذا كان الطلب ناجح.

مثال على خرج الطرفية عندما يكون النمط no-cors

ملاحظة مهمة¦ لا اود التعديل على اعدادات امان المتصفح او الخادم فهل هذا ممكن ؟

معلومات اضافية:

بعض المجلدات تحتوي على تطبيقات كاملة مربوطة بقواعد بيانات وتعمل باكمل وجه وبعض المجلدات تحتوي على مجلدات فرعية وملفات عشوائية.

السبب في محاولتي ارسال الطلب هو لمعرفة المجلدات التي تحتوي على تطبيقات صالحة وذلك لانها تعيد الحالة 200 في حين ان المجلدات الأخرى قد تعيد 500 او 403 او غيرها. (اذا كانت هناك طريقة اخرى للتأكد من ذلك، يسعدني تلقي إقتراحات). :)

شكرا لكم ...

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

1
Adnane_Kadri

هلا قمت بجانب تعريف الوضع باضافة الترويسة التالية:

const response = await fetch('http://examlpe.localhost:8080', {
      mode : 'cors',
      headers:{
          'Access-Control-Allow-Origin':'*'
      }
});

مشاركة الموارد عبر الأصل (CORS) هي آلية قائمة على ترويسة HTTP تسمح للخادم بالإشارة إلى أي أصول (نطاق فرعي sub domain او منفذ port) ، يمكن ان يكون تعطيل الوصول اليها بسبب ان العميل لا يحتويها.

ايضا، يرجى اضافة معلومات الواجهة الخلفية، يحتمل ان عملية التعطيل بسبب ان هاته الترويسة غير حاضرة هنالك ايضا.

ان كنت تستعمل اي ترويسات بشكل عام يرجى ارفاقها.

0
amer_mohammed

شكرا لك اخي، كنت اظن انني لست بحاجة لتعيين اعدادات لإستقبال الطلبات في الطرف الآخر.

0
waelaljamal

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

إعتقد أنك تستخدم node/express يمكنك تثبيت حزمة cors وضبطها بشكل يناسب مشروعك

  • تثبيت الحزمة 
npm install cors --save
  • إضافتها للتطبيق 
const cors=require("cors");
// الخيارات اختيارية
/*
const corsOptions ={
   origin:'*', 
   credentials:true,     //access-control-allow-credentials:true
   optionSuccessStatus:200,
}
*/

app.use(cors(corsOptions))

ثم إعادة تشغيل السيرفر والتجريب

0
amer_mohammed

الخادم: Apache 2.0

لدي xamp محلّي، نظام التشغيل linux توزيعة ubuntu

هل هناك طريقة لا احتاج فيها إلى تثبيت اي إعتماديات؟

شكر لك...

1
waelaljamal

يمكنك إضافة الشيفرة التالية،فهي تتأكد من أن الطلبية لنفس الدومين الرئيسي، ثم تعدل بيانات الترويسة حسبه

عليك تبديل example.com مع اسن نطاقك وباقي البيانات

app.use(function (req, res, next) {
    if (req.hostname.endsWith('example.com')) {
        res.setHeader('Access-Control-Allow-Origin', 'http://' + req.hostname)
        res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,Content-Type')
        res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE')
    }
    next()
})
0
amer_mohammed

شكرا لك اخي وائل، يبدوا انني قد اسأت فهم آلية عمل الطلبات، فلا يمكنني تحقيق ما اردته بهذه البساطة.

0
waelaljamal

التطبيق هو من يرفض الطلبية و ليس خادم الويب.

0
walid99

حاول إرسال الطلب إلى:

http://localhost:8080/examlpe

أو إلى:

http://localhost/examlpe
0
amer_mohammed

للأسف جربت هذا الأمر، من خلال اعدادات الخادم يتم عمل إعادة توجيه عند استدعاء الرابط 

http://localhost:8080/examlpe

إلى 

http://examlpe.localhost:8080/examlpe

واحصل على نفس الخطأ ولكن بصيغة أخرى :

Access to fetch at 'http://example.localhost:8080/example' 
(redirected from 'http://localhost:8080/example') from 
origin 'http://localhost:8080' has been blocked by 
CORS policy: No 'Access-Control-Allow-Origin' 
header is present on the requested resource. 
If an opaque response serves your needs, 
set the request's mode to 'no-cors' to fetch 
the resource with CORS disabled.

أما في حالة :

http://localhost/examlpe

يتم رفض الربط. 

GET http://localhost/examlpe net::ERR_CONNECTION_REFUSED

شكرا لك...