Wie ich Ajax-Anfragen an externe Ressourcenfehler (CSP) in Discourse behoben habe

Entwickler
1

Wenn Sie Probleme mit einer AJAX-Anfrage haben und vermuten, dass der Fehler auf die Content Security Policy (CSP)-Direktive strict-origin-when-cross-origin zurückzuführen ist, gibt es einige Dinge, die Sie versuchen können, um das Problem zu beheben (beachten Sie diese in der Fehlerkonsole von Chrome Devtools):

  1. Stellen Sie sicher, dass der Server so konfiguriert ist, dass er den Access-Control-Allow-Origin-Header sowohl in der Antwort auf die Preflight-Anfrage als auch in der eigentlichen AJAX-Anfrage enthält. Dieser Header erlaubt den Zugriff auf die Ressource von dem angegebenen Ursprung aus.

Hier ist ein Beispiel, wie Sie den Access-Control-Allow-Origin-Header in einem Node.js-Server mit der cors-Bibliothek konfigurieren können:

const cors = require('cors');

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

Alternativ können Sie den Access-Control-Allow-Origin-Header direkt in Ihrem serverseitigen Code einfügen. Zum Beispiel können Sie in einem Node.js-Server den Header wie folgt setzen:

res.setHeader('Access-Control-Allow-Origin', '*');
  1. Stellen Sie sicher, dass der Server so konfiguriert ist, dass er die Header zulässt, die in der Preflight-Anfrage und der eigentlichen AJAX-Anfrage verwendet werden. Dies kann durch die Aufnahme dieser Header in den Access-Control-Allow-Headers-Header erfolgen.

Hier ist ein Beispiel, wie Sie den Access-Control-Allow-Headers-Header in einem Node.js-Server konfigurieren können:

const http = require('http');

const server = http.createServer((req, res) => {

    res.setHeader('Access-Control-Allow-Origin', '*'); // Fügen Sie diese Zeile hinzu, um den Zugriff auf die Ressource von jedem Ursprung aus zu erlauben
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS'); // Fügen Sie diese Zeile hinzu, um die Verwendung der angegebenen HTTP-Methoden zu erlauben
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization, discourse-present, discourse-logged-in, discourse-track-view'); // Fügen Sie diese Zeile hinzu, um die Verwendung der angegebenen Header zu erlauben

    if (req.url === '/getTopicLikes') {
        console.log('Anfrage empfangen');
        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 gestartet auf Port 3000');
});

process.on('SIGINT', () => {
    console.log('Server wird heruntergefahren');
    server.close();
});

Bitte beachten Sie die beiden zusätzlichen Allow-Header, die spezifisch für Discourse sind:
discourse-present, discourse-logged-in, discourse-track-view

Ich hoffe, diese Schritte helfen Ihnen, das Problem mit Ihrer AJAX-Anfrage zu beheben. Lassen Sie mich wissen, wenn Sie Fragen haben.

4 „Gefällt mir“