Konfigurasi akses merentas domain dan panduan sokongan protokol CORS untuk membina pelayan Nginx

Konfigurasi akses merentas domain dan panduan sokongan protokol CORS untuk membina pelayan Nginx

Pengenalan:
Dalam pembangunan aplikasi web semasa, permintaan merentas domain telah menjadi keperluan biasa. Untuk memastikan keselamatan, penyemak imbas mengehadkan operasi merentas domain melalui permintaan AJAX secara lalai. Protokol CORS (Cross-Origin Resource Sharing) menyediakan pembangun penyelesaian yang boleh dipercayai untuk mencapai kebenaran terkawal bagi akses merentas domain.

Nginx ialah pelayan web berprestasi tinggi dan pelayan proksi terbalik Artikel ini akan memperkenalkan cara menggunakan Nginx untuk membina konfigurasi akses merentas domain pelayan dan sokongan protokol CORS.

1. Mengkonfigurasi akses merentas domain ke pelayan
   Untuk membenarkan akses daripada nama domain lain, kami perlu menambah konfigurasi akses merentas domain pada fail konfigurasi Nginx terlebih dahulu. Buka fail konfigurasi Nginx (biasanya /etc/nginx/nginx.conf) dan tambahkan konfigurasi berikut dalam bahagian http:

http {
    ...
    
    # 允许跨域访问
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
    add_header Access-Control-Expose-Headers 'Content-Length,Content-Range';
}

Konfigurasi di atas membenarkan akses daripada semua nama domain (*) dan menyokong GET, POST dan OPTIONS kaedah. Pada masa yang sama, kami juga menentukan beberapa maklumat pengepala permintaan biasa.

Selepas menyimpan dan keluar dari fail konfigurasi, muat semula konfigurasi Nginx untuk menjadikannya berkesan:

$ sudo nginx -s reload

2. Konfigurasikan sokongan protokol CORS
   Selepas menambah konfigurasi akses merentas domain ke pelayan, kami juga boleh mengkonfigurasi sokongan protokol CORS dengan lebih baik. -cara berbutir. Berikut ialah contoh konfigurasi yang hanya membenarkan akses merentas domain kepada nama domain yang ditentukan:

http {
    ...
    
    # 配置CORS
    map $http_origin $allowed_origin {
        default "";
        ~^https?://(www.)?example.com$ $http_origin;
        ~^https?://(www.)?example.net$ $http_origin;
    }
    
    server {
        ...
        
        location / {
            if ($allowed_origin != "") {
                add_header 'Access-Control-Allow-Origin' $allowed_origin;
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
                add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
            }
            
            ...
        }
    }
}

Dalam konfigurasi di atas, kami menggunakan arahan map untuk mentakrifkan $allowed_origin</code > pembolehubah, menggunakan Digunakan untuk menyimpan nama domain yang membenarkan akses merentas domain. <code>lokasi / dikonfigurasikan dalam blok server dan arahan if digunakan untuk menentukan sama ada nama domain sumber permintaan semasa berada dalam senarai yang dibenarkan. Jika ya, tambahkan maklumat pengepala CORS yang sepadan. Selain itu, kita juga boleh menambah lebih banyak peraturan mengikut keperluan kita. map指令来定义一个$allowed_origin变量，用于存储允许跨域访问的域名。在server块中配置了location /，并通过if指令判断当前请求来源的域名是否在允许列表中。如果是，则添加相应的CORS头信息。此外，我们也可以根据自己的需要添加更多的规则。

3. CORS请求的预检（preflight）
   在某些情况下，跨域请求需要进行预检操作。例如使用了自定义的请求头信息或非简单请求（例如PUT、DELETE等）时。预检请求是在实际请求之前发送的一种OPTIONS请求，用于获取服务器对实际请求的授权。

为了支持预检请求，我们只需要在location /

Prefleksi untuk permintaan CORS

Dalam sesetengah kes, permintaan merentas domain memerlukan operasi prapenerbangan. Contohnya, apabila maklumat pengepala permintaan tersuai atau permintaan bukan ringkas (seperti PUT, DELETE, dll.) digunakan. Permintaan prapenerbangan ialah permintaan OPTIONS yang dihantar sebelum permintaan sebenar untuk mendapatkan kebenaran pelayan untuk permintaan sebenar.


Untuk menyokong permintaan prapenerbangan, kami hanya perlu menambah konfigurasi berikut dalam blok location/:

location / {
    ...
    
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' $allowed_origin;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';

        return 204;
    }
    
    ...
}

Salin selepas log masuk

Dalam konfigurasi di atas, apabila kaedah permintaan adalah OPTIONS, kami mengembalikan 204 ( Tiada Kandungan ) dan tambah maklumat pengepala CORS.

Kesimpulan:
• Dengan konfigurasi di atas, kami boleh menyediakan konfigurasi akses merentas domain pelayan dan sokongan protokol CORS dengan mudah. Sama ada permintaan merentas domain yang mudah atau permintaan pra-penerbangan yang kompleks, Nginx boleh menyediakan penyelesaian yang fleksibel dan boleh dipercayai.
• Rujukan:
🎜[dokumentasi rasmi Nginx](https://nginx.org/en/docs/)🎜🎜[dokumentasi rasmi CORS](https://developer.mozilla.org/en-US/docs / Web/HTTP/CORS)🎜🎜

Atas ialah kandungan terperinci Konfigurasi akses merentas domain dan panduan sokongan protokol CORS untuk membina pelayan Nginx. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!