Discourse内で外部リソースへのAjaxリクエストエラー（CSP）を修正する方法

開発
1

AJAX リクエストで問題が発生しており、その原因が strict-origin-when-cross-origin コンテンツセキュリティポリシー（CSP）ディレクティブにある可能性がある場合は、問題を解決するためにいくつか試せることがあります（Chrome Devtools のエラーコンソールで確認してください）。

  1. サーバーが、プリフライトリクエストおよび実際の AJAX リクエストへの応答に Access-Control-Allow-Origin ヘッダーを含めるように構成されていることを確認してください。このヘッダーは、指定されたオリジンからリソースにアクセスすることを許可します。

Node.js サーバーで cors ライブラリを使用して Access-Control-Allow-Origin ヘッダーを構成する方法の例を次に示します。

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 ヘッダーに含めることによって行うことができます。

Node.js サーバーで Access-Control-Allow-Headers ヘッダーを構成する方法の例を次に示します。

const http = require('http');

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

    res.setHeader('Access-Control-Allow-Origin', '*'); // リソースを任意のオリジンからアクセスできるようにするには、この行を追加します
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS'); // 指定された HTTP メソッドを使用できるようにするには、この行を追加します
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization, discourse-present, discourse-logged-in, discourse-track-view'); // 指定されたヘッダーを使用できるようにするには、この行を追加します

    if (req.url === '/getTopicLikes') {
        console.log('リクエストを受信しました');
        res.writeHead(200, { 'Content-Type': 'application/json' });
        res.end(JSON.stringify({ likes: 100 }));
    } else {
        res.writeHead(404);
        res.end();
    }
});

server.listen(3000, () => {
    console.log('サーバーがポート 3000 で起動しました');
});

process.on('SIGINT', () => {
    console.log('サーバーをシャットダウンしています');
    server.close();
});

Discourse 固有の 2 つの追加の許可ヘッダーに注意してください：
discourse-present, discourse-logged-in, discourse-track-view

これらの手順が AJAX リクエストの問題の解決に役立つことを願っています。ご不明な点がございましたら、お知らせください。

「いいね！」 4