Bagaimana saya bisa mengatur header respons pada aset express.js

164

Saya perlu mengatur CORS agar diaktifkan pada skrip yang dilayani oleh express. Bagaimana saya bisa mengatur header dalam respons yang dikembalikan untuk publik / aset ini?

javascript node.js express Dr.Knowitall
sumber

Jawaban:

358

Setidaknya ada satu middleware di npm untuk menangani CORS di Express: cors . [lihat jawaban @mscdex]

Ini adalah cara mengatur header respons khusus, dari ExpressJS DOC

res.set(field, [value])

Setel bidang tajuk ke nilai

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

atau meneruskan objek untuk mengatur beberapa bidang sekaligus.

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

Diasingkan sebagai 

res.header(field, [value])
klode
sumber
Bagaimana saya bisa mendapatkan nilai-nilai ini? Karena saya menetapkan nilai-nilai ini di resobjek. Ketika saya mencoba melihat konten ini saya tidak menggunakan res.headers;
Bruno Casali
Lalu saya gunakan res.write('content')?
George
1
Baris ini harus digunakan sebelum menulis kepala.
Virendra Singh Rathore
Untuk beberapa alasan res.settidak berhasil bagi saya, tetapi corsmiddleware melakukan trik dengan benar.
Cezar D.
@BrunoCasali header ekstra diblokir oleh browser secara default, lihat stackoverflow.com/a/37931084/1507207
sbk201
48

Ini sangat menjengkelkan.

Oke jika ada yang masih mengalami masalah atau tidak ingin menambahkan perpustakaan lain. Yang harus Anda lakukan adalah menempatkan baris kode ware tengah ini sebelum rute Anda.

Contoh 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)=> {...});
Pd bulan depan
sumber
1
Penting titik ini relatif terhadap pesanan. Saya bertanya-tanya apakah itu benar-benar penting karena saya melihat perilaku yang berbeda ketika mengubahnya. Bagus. Terima kasih
Alejandro Teixeira Muñoz
1
Bagus: menyelesaikan masalah dengan sempurna. Menambahkan seluruh ketergantungan untuk melakukan 6 baris kode ini bukanlah jalan yang akan saya rekomendasikan untuk siapa pun ...
Alex Clark
11

Anda dapat melakukan ini dengan menggunakan kor. cors akan menangani respons CORS Anda

var cors = require('cors')

app.use(cors());
Rahul Solanki
sumber
10

Jawaban singkat:

  • res.setHeaders - Memanggil metode Node.js asli

  • res.set - set header

  • res.headers - alias untuk res.set

Charlie
sumber
9

Setidaknya ada satu middleware di npm untuk menangani CORS di Express: cors .

mscdex
sumber
7

Anda juga dapat menambahkan middleware untuk menambahkan header CORS, sesuatu seperti ini akan berfungsi:

/**
 * 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();
    }
};
pembuat magik
sumber
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();
  });
Luaskan cuplikan

Thitikan Choeibamrung
sumber
3

Jawaban @ klode benar.

Namun, Anda harus mengatur tajuk respons lain agar tajuk Anda dapat diakses orang lain.

Contoh:

Pertama, Anda menambahkan 'ukuran halaman' di header respons

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

Kemudian, yang perlu Anda lakukan adalah mengekspos tajuk Anda

response.set('Access-Control-Expose-Headers', 'page-size')
kpanodrean
sumber
Saya macet selama lebih dari satu jam mencoba mencari tahu mengapa tidak ada header kustom saya yang berhasil sampai ke ujung. Mengekspos mereka adalah jawabannya. Terima kasih banyak! Mengapa tajuk ini tidak disebutkan dalam dokumen Express (atau dalam artikel apa pun yang saya baca sejauh ini tentang tajuk ubahsuaian) sangat membingungkan.
Devin Spikowski
Bagaimana jika Anda memiliki 2 header? Seperti ini: javascript res.set("...","..."); res.set("...","...."); Sekarang bagaimana Anda mengekspos 2 header itu?
Kursor
Saya menemukan cara membaca dokumen:javascript Access-Control-Expose-Headers: * // or Access-Control-Expose-Headers: <header-name>, <header-name>, ...
Kursor