Comment j'ai corrigé les erreurs de requête Ajax vers une ressource externe (CSP) dans Discourse

Dev
1

Si vous rencontrez des problèmes avec une requête AJAX et que vous pensez que l’erreur pourrait être due à la directive de politique de sécurité du contenu (CSP) strict-origin-when-cross-origin, voici quelques éléments que vous pouvez essayer pour résoudre le problème (observez-les dans la console d’erreur de Chrome Devtools) :

  1. Assurez-vous que le serveur est configuré pour inclure l’en-tête Access-Control-Allow-Origin dans la réponse à la requête de pré-vérification ainsi qu’à la requête AJAX réelle. Cet en-tête permet à la ressource d’être accessible depuis l’origine spécifiée.

Voici un exemple de la façon dont vous pouvez configurer l’en-tête Access-Control-Allow-Origin dans un serveur Node.js à l’aide de la bibliothèque cors :

const cors = require('cors');

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

Alternativement, vous pouvez inclure l’en-tête Access-Control-Allow-Origin directement dans votre code côté serveur. Par exemple, dans un serveur Node.js, vous pouvez définir l’en-tête comme ceci :

res.setHeader('Access-Control-Allow-Origin', '*');
  1. Assurez-vous que le serveur est configuré pour autoriser les en-têtes utilisés dans la requête de pré-vérification et la requête AJAX réelle. Cela peut être fait en incluant ces en-têtes dans l’en-tête Access-Control-Allow-Headers.

Voici un exemple de la façon dont vous pouvez configurer l’en-tête Access-Control-Allow-Headers dans un serveur Node.js :

const http = require('http');

const server = http.createServer((req, res) => {
    
    res.setHeader('Access-Control-Allow-Origin', '*'); // Ajoutez cette ligne pour autoriser l'accès à la ressource depuis n'importe quelle origine
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS'); // Ajoutez cette ligne pour autoriser l'utilisation des méthodes HTTP spécifiées
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization, discourse-present, discourse-logged-in, discourse-track-view'); // Ajoutez cette ligne pour autoriser l'utilisation des en-têtes spécifiés

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

server.listen(3000, () => {
    console.log('Serveur démarré sur le port 3000');
});

process.on('SIGINT', () => {
    console.log('Arrêt du serveur');
    server.close();
});

Veuillez noter les deux en-têtes d’autorisation supplémentaires spécifiques à Discourse :
discourse-present, discourse-logged-in, discourse-track-view

J’espère que ces étapes vous aideront à résoudre le problème avec votre requête AJAX. N’hésitez pas à me faire savoir si vous avez des questions.

4 « J'aime »