Node.jsを使ったCORSの扱い方を詳しく解説

推奨ビデオ チュートリアル: node js チュートリアル

はじめに

この記事では、 Express を使用して CORS を構成し、必要に応じて CORS ミドルウェアをカスタマイズする方法を確認します。

CORS とは

CORS は、「Cross-domain Resource Sharing」の略称です。これは、HTTP リクエストが行われる場所に応じて、Web サーバー上のリソースへのリクエストを許可または制限するメカニズムです。

このポリシーは、特定の Web サーバーを他の Web サイトまたはドメインによるアクセスから保護するために使用されます。許可されたドメインのみが、スタイルシート、画像、スクリプトなどのサーバー上のファイルにアクセスできます。

現在 http://example.com/page1 を使用しており、http://image.com/myimage.jpg## から引用していると仮定します。の場合、http://image.com が http://example.com とのクロスドメイン共有を許可しない限り、画像は使用できません。

各 HTTP リクエスト ヘッダーには、

origin という名前のヘッダーがあります。ドメインリクエストの送信元を定義します。このヘッダー情報を使用して、サーバー上のリソースへの参照を制限できます。

デフォルトでは、他のソースからのリクエストはブラウザによって制限されます。

たとえば、開発中に React や Vue などのフロントエンド ライブラリを使用する場合、フロントエンド アプリケーションは

http://localhost:3000 で実行されます。現時点では、Express サーバーが別のポート (http://localhost:2020 など) で実行されている可能性があります。次に、これらのサーバー間で CORS を許可する必要があります。

ブラウザ コンソールに次のようなエラーが表示された場合。問題は CORS の制限にある可能性があります:

CORS は、パブリック API を提供する必要があり、特定のリソースへのアクセス方法と使用方法を制御したい場合に大きな役割を果たします。

また、他の Web ページで独自の API またはファイルを使用したい場合は、CORS を構成するだけで、自分自身の参照を許可し、他の Web ページからの参照を遮断できます。

Express を使用した CORS の構成

最初に新しいプロジェクトを作成し、ディレクトリ構造を作成してから、デフォルト設定を使用して実行します

npm init:

$ mkdir myapp
$ cd myapp
$ npm init -y

接続して必要なモジュールをインストールします。

express と cors ミドルウェアを使用します:

$ npm i --save express
$ npm i --save cors

次に、CORS がどのように機能するかを示すために、2 つのルートを持つ単純な Web プログラムの作成を開始します。

まず、Web サーバーとして機能するindex.js という名前のファイルを作成し、いくつかのリクエスト処理関数を実装します:

const express = require('express');
const cors = require('cors');

const app = express();

app.get('/', (req, res) => {
    res.json({
        message: 'Hello World'
    });
});

app.get('/:name', (req, res) => {
    let name = req.params.name;

    res.json({
        message: `Hello ${name}`
    });
});

app.listen(2020, () => {
    console.log('server is listening on port 2020');
});

サーバーを実行します:

$ node index.js

Access

http ://localhost:2020/ サーバーは JSON メッセージを返すはずです:

{
  "message": "Hello World"
}

http://localhost:2020/something にアクセスすると、次の内容が表示されるはずです:

{
  "message": "Hello something"
}

すべての CORS リクエストを有効にする

すべてのリクエストに対して CORS を有効にしたい場合は、ルートを構成する前に

cors ミドルウェアを使用するだけです:

const express = require('express');
const cors = require('cors');

const app = express();

app.use(cors())

......

必要に応じて 、ネットワーク上のどこからでもすべてのルートにアクセスできるようにします。したがって、この例では、各ドメインは 2 つのルートにアクセスできます。

たとえば、サーバーが

http://www.example.com で実行され、画像などのコンテンツを提供する場合、http://www などの他のドメインが許可されます。 . Differentdomain.com は http://www.example.com からリダイレクトされます。

したがって、http://www. Differentdomain.com

の Web ページでは、画像のソースとしてドメインを使用できます。

<img  alt="Node.jsを使ったCORSの扱い方を詳しく解説" >

単一ルートに対して CORS を有効にする

ルートの 1 つだけが必要な場合は、特定のルートのミドルウェアとして

cors を構成できます。

app.get('/', cors(), (req, res) => {
    res.json({
        message: 'Hello World'
    });
});

これにより、任意のドメインが特定のルートにアクセスできるようになります。現状では、他のドメインは

/ ルートにのみアクセスできます。 /:name ルートには、API と同じドメイン (この場合は http://localhost:2020) で開始されたリクエストによってのみアクセスできます。

別のオリジンで

/ パスにリクエストを送信しようとすると成功し、応答として Hello World を受け取ります。

fetch('http://localhost:2020/')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(err => console.error(err));

を実行します。上記のコードでは、サーバーからの応答がコンソールに正常に出力されたことがわかります。

{
    message: 'Hello World'
}

ルート パス以外のパス (

http://localhost:2020 など) にアクセスした場合/name または http://localhost:2020/img/cat.png の場合、このリクエストはブラウザによってブロックされます:

fetch('http://localhost:2020/name/janith')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

コードを他の場所で実行すると、 Web アプリケーションの場合、次のエラーが表示されるはずです。

#オプションを使用した CORS の構成

カスタム オプションを使用して CORS を構成することもできます。

GET や POST などの許可された HTTP メソッドは、必要に応じて構成できます。

CORS オプションを使用して単一ドメインへのアクセスを許可する方法は次のとおりです:

var corsOptions = {
    origin: 'http://localhost:8080',
    optionsSuccessStatus: 200 // For legacy browser support
}

app.use(cors(corsOptions));

如果你在源中配置域名-服务器将允许来自已配置域的CORS。因此，在我们的例子中，可以从 http://localhost:8080 访问该API，并禁止其他域使用。

如果发送一个 GET 请求，则任何路径都应该可以访问，因为这些选项是在应用在程序级别上的。

运行下面的代码将请求从 http://localhost:8080 发送到 http://localhost:2020：

//
fetch('http://localhost:2020/')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

//
fetch('http://localhost:2020/name/janith')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

可以看到被允许从该程序和域中获取信息。

还可以根据需要配置允许的 HTTP 方法：

var corsOptions = {
    origin: 'http://localhost:8080',
    optionsSuccessStatus: 200 // 对于旧版浏览器的支持
    methods: "GET, PUT"
}

app.use(cors(corsOptions));

如果从 http://localhost:8080 发送POST请求，则浏览器将会阻止它，因为仅支持 GET 和 PUT：

fetch('http://localhost:2020', {
  method: 'POST',
  body: JSON.stringify({name: "janith"}),
})
.then(response => response.json())
.then(data => console.log(data))
.catch(err => console.error(err));

用函数配置动态 CORS 源

如果配置不满足你的要求，也可以创建函数来定制 CORS。

例如假设要允许 http://something.com 和 http://example.com 对 .jpg  文件进行CORS共享：

const allowlist = ['http://something.com', 'http://example.com'];

    const corsOptionsDelegate = (req, callback) => {
    let corsOptions;

    let isDomainAllowed = whitelist.indexOf(req.header('Origin')) !== -1;
    let isExtensionAllowed = req.path.endsWith('.jpg');

    if (isDomainAllowed && isExtensionAllowed) {
        // 为此请求启用 CORS
        corsOptions = { origin: true }
    } else {
        // 为此请求禁用 CORS
        corsOptions = { origin: false }
    }
    callback(null, corsOptions)
}

app.use(cors(corsOptionsDelegate));

回调函数接受两个参数，第一个是传递 null 的错误，第二个是传递  { origin: false } 的选项。第二个参数可以是用 Express 的 request 对象构造的更多选项。

所以 http://something.com 或 http://example.com 上的 Web 应用将能够按照自定义配置从服务器引用扩展名为 .jpg 的图片。

这样可以成功引用资源文件：

<img  alt="Node.jsを使ったCORSの扱い方を詳しく解説" >

但是下面的文件将会被阻止：

<img  alt="Node.jsを使ったCORSの扱い方を詳しく解説" >

从数据源加载允许的来源列表作

还可以用保存在数据库中的白名单列表或任何一种数据源来允许 CORS：

var corsOptions = {
    origin: function (origin, callback) {
        // 从数据库加载允许的来源列表
        // 例如：origins = ['http://example.com', 'http//something.com']
        database.loadOrigins((error, origins) => {
            callback(error, origins);
        });
    }
}

app.use(cors(corsOptions));

原文：https://stackabuse.com/handling-cors-with-node-js/

作者：Janith Kasun

更多编程相关知识，可访问：编程教学！！

以上がNode.jsを使ったCORSの扱い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。