Bagaimana untuk melaksanakan sokongan perkongsian sumber silang (CORS) melalui pelayan proksi Nginx?-tutorial php-php.cn

Bagaimana untuk melaksanakan sokongan perkongsian sumber silang (CORS) melalui pelayan proksi Nginx?

WBOY

Lepaskan： 2023-09-06 10:36:01

asal

2239 orang telah melayarinya

Bagaimana untuk melaksanakan sokongan perkongsian sumber silang (CORS) melalui pelayan proksi Nginx?

Pengenalan:
Cross-Origin Resource Sharing (CORS) ialah mekanisme yang membenarkan pelayan memberikan akses kepada sumber tertentu apabila memproses permintaan daripada sumber yang berbeza (domain, protokol atau port) . Dalam aplikasi praktikal, selalunya perlu untuk mencapai perkongsian sumber melalui pelayan proksi Nginx Artikel ini akan memperkenalkan cara menyokong CORS melalui konfigurasi Nginx.

Langkah 1: Pasang dan konfigurasikan Nginx

1 Pasang Nginx
Pertama, pastikan Nginx dipasang pada pelayan. Jika ia tidak dipasang, sila pilih kaedah pemasangan yang sesuai mengikut sistem pengendalian.

2 Edit fail konfigurasi Nginx
Gunakan editor teks untuk membuka fail konfigurasi Nginx, biasanya terletak di /etc/nginx/nginx.conf atau /etc/nginx/conf.d. /default .conf. /etc/nginx/nginx.conf或/etc/nginx/conf.d/default.conf。

3.添加CORS配置
在配置文件的server块中添加以下代码，以启用CORS支持：

location / {
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT, X-CustomHeader, Keep-Alive, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type';
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;
        return 204;
    }
    if ($request_method = 'POST') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT, X-CustomHeader, Keep-Alive, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
    }
    if ($request_method = 'GET') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT, X-CustomHeader, Keep-Alive, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
    }
}

Salin selepas log masuk

以上配置将允许任何来源的请求进行跨域访问，并允许常见的请求方法（GET、POST、OPTIONS）。'Access-Control-Allow-Headers'指定了允许的请求头，'Access-Control-Expose-Headers'指定了允许的响应头。

4.保存并重启Nginx
保存配置文件，并重启Nginx服务，使配置生效。可以使用以下命令来重启Nginx：

sudo service nginx restart

Salin selepas log masuk

步骤二：测试CORS支持

为了验证CORS配置的有效性，我们可以使用浏览器的开发工具来查看请求和响应头信息。

1.打开浏览器开发工具
在浏览器中打开开发者工具（一般是按F12键），切换到"Network"（网络）选项卡。

2.发送跨域请求
通过JavaScript代码或者直接在浏览器地址栏输入一个跨域地址，发送跨域请求。例如，假设我们的Nginx代理服务器的地址为http://example.com，并且我们要访问的跨域URL为http://api.example.com/data。

3.查看请求和响应头
在开发者工具的“Network”选项卡中，选中对应的请求，然后点击它以展开详细信息。可以在请求和响应的头部信息中找到Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers

3 Tambah konfigurasi CORS

Tambahkan kod berikut dalam blok pelayan fail konfigurasi untuk membolehkan sokongan CORS:
rrreee

Konfigurasi di atas akan membenarkan akses merentas domain untuk permintaan dari mana-mana asal dan benarkan kaedah Permintaan biasa (GET, POST, OPTIONS). 'Access-Control-Allow-Headers' menentukan pengepala permintaan yang dibenarkan dan 'Access-Control-Expose-Headers' menentukan pengepala respons yang dibenarkan. 🎜🎜4. Simpan dan mulakan semula Nginx🎜Simpan fail konfigurasi dan mulakan semula perkhidmatan Nginx untuk membuat konfigurasi berkuat kuasa. Anda boleh menggunakan arahan berikut untuk memulakan semula Nginx: 🎜rrreee🎜Langkah 2: Uji sokongan CORS🎜🎜Untuk mengesahkan kesahihan konfigurasi CORS, kami boleh menggunakan alatan pembangunan penyemak imbas untuk melihat maklumat pengepala permintaan dan respons. 🎜🎜1. Buka alat pembangunan penyemak imbas 🎜Buka alat pembangun dalam penyemak imbas (biasanya tekan kekunci F12) dan tukar ke tab "Rangkaian". 🎜🎜2. Hantar permintaan merentas domain🎜Hantar permintaan merentas domain melalui kod JavaScript atau terus masukkan alamat merentas domain dalam bar alamat penyemak imbas. Sebagai contoh, anggap bahawa alamat pelayan proksi Nginx kami ialah http://example.com, dan URL silang domain yang ingin kami akses ialah http://api.example. com/data. 🎜🎜3. Lihat pengepala permintaan dan respons🎜Dalam tab "Rangkaian" alat pembangun, pilih permintaan yang sepadan dan klik padanya untuk mengembangkan butiran. Anda boleh menemui Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow- Headers dan lain-lain yang berkaitan maklumat pengepala untuk mengesahkan sokongan CORS. 🎜🎜Ringkasan: 🎜Dengan mengkonfigurasi Nginx, kami boleh melaksanakan sokongan perkongsian sumber merentas domain (CORS) dengan mudah. Hanya tambahkan beberapa maklumat pengepala pada fail konfigurasi Nginx untuk menjadikan pelayan proksi Nginx menyokong CORS. Ini memastikan permintaan merentas domain berfungsi dengan betul antara domain yang berbeza. 🎜

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan sokongan perkongsian sumber silang (CORS) melalui pelayan proksi Nginx?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!