express.jsアセットに応答ヘッダーを設定するにはどうすればよいですか


164

Expressが提供するスクリプトでCORSを有効にする必要があります。パブリック/アセットのこれらの返された応答にヘッダーを設定するにはどうすればよいですか?

回答:


358

npmには、ExpressでCORSを処理するための少なくとも1つのミドルウェア、corsがあります。[@mscdexの回答を参照]

これは、ExpressJS DOCからカスタム応答ヘッダーを設定する方法です

res.set(field, [value])

ヘッダーフィールドを値に設定

res.set('Content-Type', 'text/plain');

または、オブジェクトを渡して、一度に複数のフィールドを設定します。

res.set({
  'Content-Type': 'text/plain',
  'Content-Length': '123',
  'ETag': '12345'
})

別名

res.header(field, [value])

これらの値を取得するにはどうすればよいですか?これらの値をresオブジェクトに設定しているためです。このコンテンツを表示しようとすると、を使用して未定義になりres.headersます。
Bruno Casali 2016

それから私は使用しres.write('content')ますか?
ジョージ

1
この行は、ヘッドを書き込む前に使用する必要があります。
Virendra Singh Rathore 2016年

どういうわけかres.set私にcorsはうまくいきませんでしたが、ミドルウェアはちょうどうまくトリックを行いました。
セザールD.

@BrunoCasali余分なヘッダは、デフォルトでは、ブラウザによってブロックされている、参照stackoverflow.com/a/37931084/1507207を
sbk201

48

これはとても迷惑です。

まだ問題が発生している場合、または別のライブラリを追加したくない場合は、問題ありません。あなたがしなければならないすべてはあなたのルートの前にこのミドルウェアのコード行を置くことです。

Corsの例

app.use((req, res, next) => {
    res.append('Access-Control-Allow-Origin', ['*']);
    res.append('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.append('Access-Control-Allow-Headers', 'Content-Type');
    next();
});

// Express routes
app.get('/api/examples', (req, res)=> {...});

1
この点は、注文に関連して重要です。変更するときに異なる動作を見たので、本当に重要なのかと思いました。いいね。ありがとう
Alejandro TeixeiraMuñoz

1
ニース:問題を完全に解決しました。これらの6行のコードを実行するために依存関係全体を追加することは、誰にもお勧めできない道です...
Alex Clark


10

短い答え:

  • res.setHeaders -ネイティブのNode.jsメソッドを呼び出します

  • res.set -ヘッダーを設定します

  • res.headers -res.setのエイリアス



7

ミドルウェアを追加してCORSヘッダーを追加することもできます。次のようなものが機能します。

/**
 * Adds CORS headers to the response
 *
 * {@link https://en.wikipedia.org/wiki/Cross-origin_resource_sharing}
 * {@link http://expressjs.com/en/4x/api.html#res.set}
 * @param {object} request the Request object
 * @param {object} response the Response object
 * @param {function} next function to continue execution
 * @returns {void}
 * @example
 * <code>
 * const express = require('express');
 * const corsHeaders = require('./middleware/cors-headers');
 *
 * const app = express();
 * app.use(corsHeaders);
 * </code>
 */
module.exports = (request, response, next) => {
    // http://expressjs.com/en/4x/api.html#res.set
    response.set({
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'DELETE,GET,PATCH,POST,PUT',
        'Access-Control-Allow-Headers': 'Content-Type,Authorization'
    });

    // intercept OPTIONS method
    if(request.method === 'OPTIONS') {
        response.send(200);
    } else {
        next();
    }
};

4

service.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
    next();
  });


3

@klodeの答えは正しいです。

ただし、別の応答ヘッダーを設定して、他のユーザーがヘッダーにアクセスできるようにする必要があります。


例:

まず、応答ヘッダーに「ページサイズ」を追加します

response.set('page-size', 20);

次に、ヘッダーを公開するだけです

response.set('Access-Control-Expose-Headers', 'page-size')

私は1時間以上、自分のカスタムヘッダーのいずれも相手に届かなかった理由を理解しようとしました。それらを公開することが答えでした。どうもありがとうございます!Expressのドキュメント(またはこれまでにカスタムヘッダーについてこれまでに読んだ記事)でこのヘッダーに言及がない理由は、非常に不可解です。
Devin Spikowski、2018年

2つのヘッダーがある場合はどうなりますか?このように:javascript res.set("...","..."); res.set("...","...."); これらの2つのヘッダーをどのように公開しますか?
カーソル

ドキュメントの読み方を発見しました:javascript Access-Control-Expose-Headers: * // or Access-Control-Expose-Headers: <header-name>, <header-name>, ...
カーソル
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.