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

**URL:** <https://meta.discourse.org/t/how-i-fixed-ajax-request-to-external-resource-errors-csp-inside-discourse/249115>\
**Category:** Development\
**Created:** [2022 年 12 月 16 日午後 12:08 UTC](https://meta.discourse.org/t/how-i-fixed-ajax-request-to-external-resource-errors-csp-inside-discourse/249115 "2022-12-16T12:08:55Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![Sören\_Geier](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/s%C3%B6ren_geier/32/235234_2.png) [@Sören\_Geier](https://meta.discourse.org/u/S%C3%B6ren_Geier)\
**Post date:** [2022 年 12 月 16 日午後 12:08 UTC](https://meta.discourse.org/t/how-i-fixed-ajax-request-to-external-resource-errors-csp-inside-discourse/249115/1 "2022-12-16T12:08:55Z")

</div>

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

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

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

```plaintext
const cors = require('cors');

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

```

または、サーバー側のコードに直接 `Access-Control-Allow-Origin` ヘッダーを含めることもできます。たとえば、Node.js サーバーでは、ヘッダーを次のように設定できます。

```plaintext
res.setHeader('Access-Control-Allow-Origin', '*');

```

1. サーバーが、プリフライトリクエストおよび実際の AJAX リクエストで使用されているヘッダーを許可するように構成されていることを確認してください。これは、これらのヘッダーを `Access-Control-Allow-Headers` ヘッダーに含めることによって行うことができます。

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

```plaintext
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 リクエストの問題の解決に役立つことを願っています。ご不明な点がございましたら、お知らせください。

---

_[View the full topic](https://meta.discourse.org/t/how-i-fixed-ajax-request-to-external-resource-errors-csp-inside-discourse/249115)._