كيف قمت بإصلاح أخطاء طلب Ajax إلى مورد خارجي (CSP) داخل Discourse

مطور
1

إذا كنت تواجه مشكلة في طلب AJAX وتعتقد أن الخطأ قد يكون بسبب توجيه سياسة أمان المحتوى (CSP) strict-origin-when-cross-origin، فهناك بعض الأشياء التي يمكنك تجربتها لإصلاح المشكلة (لاحظ تلك الموجودة في وحدة تحكم الأخطاء في Chrome Devtools):

  1. تأكد من أن الخادم مهيأ لتضمين رأس Access-Control-Allow-Origin في الاستجابة لطلب الفحص المسبق وكذلك لطلب AJAX الفعلي. يسمح هذا الرأس بالوصول إلى المورد من الأصل المحدد.

إليك مثال لكيفية تكوين رأس Access-Control-Allow-Origin في خادم Node.js باستخدام مكتبة cors:

const cors = require('cors');

app.use(cors({
  origin: 'http://example.com',
  optionsSuccessStatus: 200
}));

بدلاً من ذلك، يمكنك تضمين رأس Access-Control-Allow-Origin مباشرة في رمز جانب الخادم الخاص بك. على سبيل المثال، في خادم Node.js، يمكنك تعيين الرأس على النحو التالي:

res.setHeader('Access-Control-Allow-Origin', '*');
  1. تأكد من أن الخادم مهيأ للسماح بالرؤوس المستخدمة في طلب الفحص المسبق وطلب AJAX الفعلي. يمكن القيام بذلك عن طريق تضمين هذه الرؤوس في رأس Access-Control-Allow-Headers.

إليك مثال لكيفية تكوين رأس Access-Control-Allow-Headers في خادم Node.js:

const http = require('http');

const server = http.createServer((req, res) => {
    
    res.setHeader('Access-Control-Allow-Origin', '*'); // Add this line to allow the resource to be accessed from any origin
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS'); // Add this line to allow the specified HTTP methods to be used
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization, discourse-present, discourse-logged-in, discourse-track-view'); // Add this line to allow the specified headers to be used

    if (req.url === '/getTopicLikes') {
        console.log('Request received');
        res.writeHead(200, { 'Content-Type': 'application/json' });
        res.end(JSON.stringify({ likes: 100 }));
    } else {
        res.writeHead(404);
        res.end();
    }
});

server.listen(3000, () => {
    console.log('Server started on port 3000');
});

process.on('SIGINT', () => {
    console.log('Shutting down the server');
    server.close();
});

يرجى ملاحظة الرؤوس الإضافية المسموح بها الخاصة بـ Discourse:
discourse-present, discourse-logged-in, discourse-track-view

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

4 إعجابات