Comment puis-je définir un en-tête de réponse sur les actifs express.js

166

Je dois configurer CORS pour qu'il soit activé sur les scripts servis par express. Comment puis-je définir les en-têtes dans ces réponses renvoyées pour public / assets?

Dr Knowitall
la source

Réponses:

359

Il existe au moins un middleware sur npm pour gérer CORS dans Express: cors . [voir la réponse @mscdex]

Voici comment définir des en-têtes de réponse personnalisés à partir d' ExpressJS DOC

res.set(field, [value])

Définir le champ d'en-tête sur la valeur

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

ou passez un objet pour définir plusieurs champs à la fois.

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

Aliasé comme

res.header(field, [value])
Klode
la source
Comment puis-je obtenir ces valeurs? Parce que j'ai défini ces valeurs dans resobject. Lorsque j'essaie de voir ce contenu, je ne suis pas défini en utilisant res.headers;
Bruno Casali
Alors j'utilise res.write('content')?
George
1
Cette ligne doit être utilisée avant d'écrire la tête.
Virendra Singh Rathore
Pour une raison quelconque, cela res.setn'a pas fonctionné pour moi, mais le corsmiddleware a parfaitement fonctionné.
Cezar D.
Les en-têtes supplémentaires @BrunoCasali sont bloqués par défaut par le navigateur, voir stackoverflow.com/a/37931084/1507207
sbk201
48

C'est tellement ennuyeux.

D'accord si quelqu'un a encore des problèmes ou ne veut tout simplement pas ajouter une autre bibliothèque. Tout ce que vous avez à faire est de placer cette ligne de code intermédiaire avant vos itinéraires.

Exemple de 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)=> {...});
Proximo
la source
1
Important ce point par rapport à la commande. Je me demandais si c'était vraiment important car je voyais différents comportements en le changeant. Agréable. Merci
Alejandro Teixeira Muñoz
1
Nice: a parfaitement résolu le problème. Ajouter une dépendance entière pour exécuter ces 6 lignes de code n'est pas une voie que je recommanderais à n'importe qui ...
Alex Clark
11

Vous pouvez le faire en utilisant cors. cors s'occupera de votre réponse CORS

var cors = require('cors')

app.use(cors());
Rahul Solanki
la source
10

Réponse courte:

  • res.setHeaders - appelle la méthode native Node.js

  • res.set - définit les en-têtes

  • res.headers - un alias pour res.set

Charlie
la source
9

Il existe au moins un middleware sur npm pour gérer CORS dans Express: cors .

mscdex
la source
7

Vous pouvez également ajouter un middleware pour ajouter des en-têtes CORS, quelque chose comme ceci fonctionnerait:

/**
 * 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();
    }
};
magikMaker
la source
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();
  });

Thitikan Choeibamrung
la source
3

La réponse de @ klode est juste.

Cependant, vous êtes censé définir un autre en-tête de réponse pour rendre votre en-tête accessible aux autres.


Exemple:

Tout d'abord, vous ajoutez 'page-size' dans l'en-tête de la réponse

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

Ensuite, tout ce que vous avez à faire est d'exposer votre en-tête

response.set('Access-Control-Expose-Headers', 'page-size')
kpanodréen
la source
J'ai été coincé pendant plus d'une heure à essayer de comprendre pourquoi aucun de mes en-têtes personnalisés n'arrivait à l'autre bout. Les exposer était la réponse. Merci beaucoup! Pourquoi cet en-tête n'a aucune mention dans les documents Express (ou dans tous les articles que j'ai lus jusqu'à présent sur les en-têtes personnalisés) est très déroutant.
Devin Spikowski
Et si vous aviez 2 en-têtes? Comme ceci: javascript res.set("...","..."); res.set("...","...."); Maintenant, comment exposez-vous ces 2 en-têtes?
Curseur le
J'ai découvert comment lire la documentation:javascript Access-Control-Expose-Headers: * // or Access-Control-Expose-Headers: <header-name>, <header-name>, ...
Curseur le