Como corrigi erros de Requisição Ajax para recurso externo (CSP) dentro do Discourse

Dev
1

Se você estiver com problemas em uma solicitação AJAX e achar que o erro pode ser devido à diretiva strict-origin-when-cross-origin da Content Security Policy (CSP), há algumas coisas que você pode tentar para corrigir o problema (observe aquelas no console de erro do Chrome Devtools):

  1. Certifique-se de que o servidor esteja configurado para incluir o cabeçalho Access-Control-Allow-Origin na resposta à solicitação preflight, bem como à solicitação AJAX real. Este cabeçalho permite que o recurso seja acessado a partir da origem especificada.

Aqui está um exemplo de como você pode configurar o cabeçalho Access-Control-Allow-Origin em um servidor Node.js usando a biblioteca cors:

const cors = require('cors');

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

Alternativamente, você pode incluir o cabeçalho Access-Control-Allow-Origin diretamente no seu código do lado do servidor. Por exemplo, em um servidor Node.js, você pode definir o cabeçalho assim:

res.setHeader('Access-Control-Allow-Origin', '*');
  1. Certifique-se de que o servidor esteja configurado para permitir os cabeçalhos que estão sendo usados na solicitação preflight e na solicitação AJAX real. Isso pode ser feito incluindo esses cabeçalhos no cabeçalho Access-Control-Allow-Headers.

Aqui está um exemplo de como você pode configurar o cabeçalho Access-Control-Allow-Headers em um servidor Node.js:

const http = require('http');

const server = http.createServer((req, res) => {
    
    res.setHeader('Access-Control-Allow-Origin', '*'); // Adicione esta linha para permitir que o recurso seja acessado de qualquer origem
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS'); // Adicione esta linha para permitir o uso dos métodos HTTP especificados
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization, discourse-present, discourse-logged-in, discourse-track-view'); // Adicione esta linha para permitir o uso dos cabeçalhos especificados

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

server.listen(3000, () => {
    console.log('Servidor iniciado na porta 3000');
});

process.on('SIGINT', () => {
    console.log('Desligando o servidor');
    server.close();
});

Observe os dois cabeçalhos de permissão adicionais que são específicos do Discourse:
discourse-present, discourse-logged-in, discourse-track-view

Espero que estas etapas ajudem a corrigir o problema com sua solicitação AJAX. Me avise se tiver alguma dúvida.

4 curtidas