Come ho risolto gli errori delle richieste Ajax a risorse esterne (CSP) in Discourse

Sviluppatore
1

Se stai riscontrando problemi con una richiesta AJAX e pensi che l’errore possa essere dovuto alla direttiva strict-origin-when-cross-origin della Content Security Policy (CSP), ci sono alcune cose che puoi provare per risolvere il problema (osserva quelle nella console degli errori di Chrome Devtools):

  1. Assicurati che il server sia configurato per includere l’header Access-Control-Allow-Origin nella risposta alla richiesta preflight e alla richiesta AJAX effettiva. Questo header consente l’accesso alla risorsa dall’origine specificata.

Ecco un esempio di come puoi configurare l’header Access-Control-Allow-Origin in un server Node.js utilizzando la libreria cors:

const cors = require('cors');

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

In alternativa, puoi includere l’header Access-Control-Allow-Origin direttamente nel tuo codice lato server. Ad esempio, in un server Node.js, puoi impostare l’header in questo modo:

res.setHeader('Access-Control-Allow-Origin', '*');
  1. Assicurati che il server sia configurato per consentire gli header utilizzati nella richiesta preflight e nella richiesta AJAX effettiva. Ciò può essere fatto includendo questi header nell’header Access-Control-Allow-Headers.

Ecco un esempio di come puoi configurare l’header Access-Control-Allow-Headers in un server Node.js:

const http = require('http');

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

    res.setHeader('Access-Control-Allow-Origin', '*'); // Aggiungi questa riga per consentire l'accesso alla risorsa da qualsiasi origine
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS'); // Aggiungi questa riga per consentire l'utilizzo dei metodi HTTP specificati
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization, discourse-present, discourse-logged-in, discourse-track-view'); // Aggiungi questa riga per consentire l'utilizzo degli header specificati

    if (req.url === '/getTopicLikes') {
        console.log('Richiesta ricevuta');
        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 avviato sulla porta 3000');
});

process.on('SIGINT', () => {
    console.log('Spegnimento del server');
    server.close();
});

Nota i due header di autorizzazione aggiuntivi specifici di Discourse:
discourse-present, discourse-logged-in, discourse-track-view

Spero che questi passaggi ti aiutino a risolvere il problema con la tua richiesta AJAX. Fammi sapere se hai domande.

4 Mi Piace