شرح - javascript fetch




لا يوجد رأس "Access-Control-Allow-Origin" موجود على المورد المطلوب-عند محاولة الحصول على البيانات من واجهة برمجة تطبيقات REST (6)

أحاول جلب بعض البيانات من REST API لـ HP Alm. يعمل بشكل جيد مع برنامج نصي صغير حلقي - أحصل على بياناتي.

الآن القيام بذلك باستخدام JavaScript ، يبدو أن إحضار و ES6 (أكثر أو أقل) يمثل مشكلة أكبر. أستمر في تلقي رسالة الخطأ هذه:

جلب API لا يمكن تحميل. الرد على طلب الاختبار المبدئي لا يجتاز فحص التحكم في الوصول: لا يوجد رأس "وصول - تحكم - السماح - أصل" موجود على المورد المطلوب. الأصل ' http://127.0.0.1:3000 ' غير مسموح بالوصول. تحتوي الاستجابة على رمز حالة HTTP 501. إذا كانت الاستجابة غير الشفافة تفي باحتياجاتك ، فاضبط وضع الطلب على "عدم ظهور" لجلب المورد مع تعطيل CORS.

أدرك أن هذا يرجع إلى أنني أحاول جلب هذه البيانات من داخل المضيف المحلي وأن الحل يجب أن يكون باستخدام CORS. الآن أعتقد أنني فعلت ذلك بالفعل ، لكن بطريقة ما يتجاهل ما أكتبه في العنوان أو المشكلة هي شيء آخر؟

لذلك ، هل هناك مشكلة في التنفيذ؟ هل أفعل ذلك خطأ؟ لا يمكنني التحقق من سجلات الخادم لسوء الحظ. أنا حقا عالقة بعض الشيء هنا.

function performSignIn() {

  let headers = new Headers();

  headers.append('Content-Type', 'application/json');
  headers.append('Accept', 'application/json');

  headers.append('Access-Control-Allow-Origin', 'http://localhost:3000');
  headers.append('Access-Control-Allow-Credentials', 'true');

  headers.append('GET', 'POST', 'OPTIONS');

  headers.append('Authorization', 'Basic ' + base64.encode(username + ":" + password));

  fetch(sign_in, {
      //mode: 'no-cors',
      credentials: 'include',
      method: 'POST',
      headers: headers
    })
    .then(response => response.json())
    .then(json => console.log(json))
    .catch(error => console.log('Authorization failed : ' + error.message));
}

أنا أستخدم Chrome. لقد جربت أيضًا استخدام مكون Chrome CORS الإضافي هذا ، لكن بعد ذلك تظهر لي رسالة خطأ أخرى:

يجب ألا تكون قيمة رأس "Access-Control-Allow-Origin" في الاستجابة هي حرف البدل "*" عندما يكون وضع بيانات اعتماد الطلب "include". الأصل ' http://127.0.0.1:3000 ' غير مسموح بالوصول. يتم التحكم في وضع بيانات الاعتماد للطلبات التي يبدأها XMLHttpRequest بواسطة سمة withCredentials.


احذف هذا:

credentials: 'include',

باستخدام dataType: 'jsonp' عملت لي.

   async function get_ajax_data(){
       var _reprojected_lat_lng = await $.ajax({
                                type: 'GET',
                                dataType: 'jsonp',
                                data: {},
                                url: _reprojection_url,
                                error: function (jqXHR, textStatus, errorThrown) {
                                    console.log(jqXHR)
                                },
                                success: function (data) {
                                    console.log(data);

                                    // note: data is already json type, you
                                    //       just specify dataType: jsonp
                                    return data;
                                }
                            });


 } // function               

فقط سنتي ... فيما يتعلق بكيفية استخدام وكيل CORS للتغلب على مشاكل "لا يوجد عنوان Access-Control-Allow-Origin "

لهؤلاء الذين يعملون مع php في الخلفية ، فإن نشر "وكيل CORS" بسيط مثل:

  1. قم بإنشاء ملف باسم "no-cors.php" مع المحتوى التالي:

    $URL = $_GET['url']; echo json_encode(file_get_contents($URL)); die();

  2. في النهاية الأمامية ، قم بعمل شيء مثل:

    fetch('https://example.com/no-cors.php' + '?url=' + url) .then(response=>{*/Handle Response/*})


في حالتي ، منع خادم الويب طريقة "OPTIONS"

تحقق من خادم الويب لديك للتعرف على طريقة الخيارات

أنا أستخدم "webtier"

/www/webtier/domains/[domainname]/config/fmwconfig/components/OHS/VCWeb1/httpd.conf

 <IfModule mod_rewrite.c> RewriteEngine on RewriteCond %{REQUEST_METHOD} ^OPTIONS RewriteRule .* . [F] </IfModule> 

التغيير إلى

 <IfModule mod_rewrite.c> RewriteEngine off RewriteCond %{REQUEST_METHOD} ^OPTIONS RewriteRule .* . [F] </IfModule> 

نشأت المشكلة لأنك أضفت الكود التالي كرأس طلب في الواجهة الأمامية:

headers.append('Access-Control-Allow-Origin', 'http://localhost:3000');
headers.append('Access-Control-Allow-Credentials', 'true');

تنتمي هذه الرؤوس إلى الاستجابة وليس الطلب. لذا قم بإزالتها ، بما في ذلك السطر:

headers.append('GET', 'POST', 'OPTIONS');

يحتوي طلبك على "Content-Type: application / json" ، ومن ثمّ عرض ما يسمى الاختبار المبدئي لـ CORS. تسبب هذا المستعرض إرسال الطلب مع طريقة OPTIONS. انظر CORS الاختبار المبدئي للحصول على معلومات مفصلة.
لذلك ، في النهاية الخلفية ، يجب عليك التعامل مع هذا الطلب المبدئي عن طريق إرجاع رؤوس الاستجابة التي تشمل:

Access-Control-Allow-Origin : http://localhost:3000
Access-Control-Allow-Credentials : true
Access-Control-Allow-Methods : GET, POST, OPTIONS
Access-Control-Allow-Headers : Origin, Content-Type, Accept

بالطبع ، يعتمد بناء الجملة الفعلي على لغة البرمجة التي تستخدمها للجهة الخلفية الخاصة بك.

في الواجهة الأمامية ، يجب أن يكون الأمر كذلك:

function performSignIn() {
    let headers = new Headers();

    headers.append('Content-Type', 'application/json');
    headers.append('Accept', 'application/json');
    headers.append('Authorization', 'Basic ' + base64.encode(username + ":" +  password));
    headers.append('Origin','http://localhost:3000');

    fetch(sign_in, {
        mode: 'cors',
        credentials: 'include',
        method: 'POST',
        headers: headers
    })
    .then(response => response.json())
    .then(json => console.log(json))
    .catch(error => console.log('Authorization failed : ' + error.message));
}

يحدث هذا الخطأ عندما لا يتطابق عنوان URL الخاص بالعميل وعنوان URL الخاص بالخادم ، بما في ذلك رقم المنفذ. في هذه الحالة ، تحتاج إلى تمكين خدمتك لـ CORS والتي تتم بمشاركة الموارد عبر المصادر.

إذا كنت تستضيف خدمة Spring REST ، فيمكنك العثور عليها في المدونة التي تدعم CORS في Spring Framework .

إذا كنت تستضيف خدمة باستخدام خادم Node.js بعد ذلك

  1. إيقاف خادم Node.js.
  2. npm install cors --save
  3. أضف الأسطر التالية إلى server.js الخاص بك

    var cors = require('cors')
    
    app.use(cors()) // Use this after the variable declaration




preflight