مشكلة في قبول ال api

[sohep]

Access to XMLHttpRequest at 'http://127.0.0.1:5000/bookss' from origin 'http://127.0.0.1:8887' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

هذه الرسالة تعطيني خطأ عندما ارسل بيانات عن طريق api flask الى تطبيق vue js
مع ان النتيجة تمام على postman

getCourses() {
        // GET /someUrl
        this.$http.get('http://127.0.0.1:5000/bookss').then(response => {
      
          // get body data
          this.courses = response.body;
      
        }, response => {
          // error callback
        });
      }

flask

@app.route('/bookss', methods=['GET'])
def get_books():

    book = [{
        "id": "PL1FWK-sgJ9ek59ylOuaS8Ggjz9oBVM8Hb",
        "name": "VueJS \u0625\u0633\u0623\u0644\u0646\u064a \u0639\u0646",
        "url": "https:\/\/www.youtube.com\/watch?v=TQQVt3CbSCw&list=PL1FWK-sgJ9ek59ylOuaS8Ggjz9oBVM8Hb",
        "description": "اهلا وسهلا بكم ",
        "thumbnails": "https:\/\/i.ytimg.com\/vi\/TQQVt3CbSCw\/sddefault.jpg",
        "statistics": {
            "viewCount": 111,
            "likeCount": 11,
            "commentCount": 7,
            "duration": "00:04:18",
            "lessons": 2
        }}]

    return jsonify(book)

[YaserAlnajjar]

المشكلة هي بسبب حماية CORS

ماهي هذه الحماية؟

بإمكاننا القول أنها ليست حماية وإنما policy (سياسة) تتخذها المتصفحات تجاه الطلبات requests.

وهي تمنع أن يتم ارسال طلب من دومين إلى آخر.

هذه تفاصيل أكثر حولها: https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

• تذكر أن المسؤول عن هذه تطبيق هذه السياسة هو المتصفح (كروم، فايروكوس… إلخ).

  بمعنى لو جربت في Postman سترى أن ارسال الطلبات يعمل (لأنه لا يهتم بتطبيق هذه السياسة).

• هناك أمر مهم أن هذه السياسة ليست فقط لاسم الدومين، ولكنها أيضاً لـ:

  1. المنفذ port مثلاً localhost:8000 و localhost:5000 سيمنع المتصفح ارسال الطلبات عليها.
  2. البروتوكول مثلاً https://locahost و http://localhost الفرق هو http(s) سيمنع المتصفح هذا أيضاً.

كيف يمكن جعل المتصفح يقبل ارسال طلب ajax من دومين على آخر؟

الأمر بسيط فقط تجعل السيرفر يرسل هذا الهيدر HTTP Header:

Access-Control-Allow-Origin: http://www.example.com
Access-Control-Allow-Methods: POST

الهيدر هذا يقول للمتصفح:

يا متصفح، اقبل ارسال أي طلب من نوع POST على الدومين http://www.example.com

كيف يتم الأمر في فلاسك؟

باستعمال الباكج flask-cors تقوم بجعل السيرفر يرسل الهيدر الذي في الأعلى على الدومين الذي تريد منه ارسال الطلبات.

مثلاً عندك سيرفر الفلاسك على http://127.0.0.1:5000
وسيرفر الفيو على http://127.0.0.1:8000

عندها تستعمل خيارات الـ CORS في فلاسك لإرسال الهيدر الذي يحتوي على رابط سيرفر الفيو http://127.0.0.1:8000

هنا يوجد شرح لكيفية التعامل مع الأمر: https://stackoverflow.com/questions/26980713/solve-cross-origin-resource-sharing-with-flask

[sohep]

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

[YaserAlnajjar]

قم بالابقاء على كل شيء كما هو…

فقط اجعل سيرفر الفلاسك يقبل الطلبات من سيرفر الفيو كما وضحت لك بالأعلى.

بالنسبة لجعل تطبيق فيو يعمل من داخل فلاسك، فأنا لا أفضل هذا الأمر لأنه يعقد الأمور لا أكثر

[sohep]

صديقي ارجو ان تتحملني يبدو أنني لم أفهم عليك
أنا لا اريد ان اشغل سيرفر من اجل تطبيق فيو اريد أن يكون لكلاهما سيرفر واحد
أم انه يوجد تعليمة خاصة في فيو تشغل سيرفر خاص بها انا استخدم تطبيق من اجل ان اشغل سيرفر خاص لفيو

[YaserAlnajjar]

اهاا، يبدو أنك لا تستعمل npm أو yarn لتشغيل سيرفر خاص بالفيو

هذا template جاهز:

https://github.com/vuejs-templates/webpack-simple/tree/master/template

جرب تحميله وتشغيله وحاول فهم المكونات الموجودة فيه…

إذا يوجد أي شيء غير واضح نحن هنا معك

[sohep]

نعم لا استعملها. انا متابع كورس واتعلم منه الvue والى الان لم نستخدمها ضمن الكورس.

أود أن أشكرك مرات عديدة

[YaserAlnajjar]

على الرحب والسعة عزيزي صهيب

[sohep]

لقد نجحت العملية
من خلال تمرير الهيدر ببساطة على الشكل التالي:

    response = jsonify(book)
    response.headers.add('Access-Control-Allow-Origin', 'http://127.0.0.1:8887')
    return response

[YaserAlnajjar]

رائع جداً