Bagaimana untuk melaksanakan konfigurasi perkongsian sumber silang domain (CORS) Nginx

Cara melaksanakan konfigurasi perkongsian sumber merentas domain (CORS) Nginx memerlukan contoh kod khusus

Dengan populariti pembangunan pemisahan bahagian hadapan dan belakang, isu perkongsian sumber merentas domain (CORS) telah menjadi perkara biasa. cabaran. Dalam pembangunan web, disebabkan oleh sekatan dasar asal yang sama penyemak imbas, kod JavaScript sisi klien hanya boleh meminta sumber dengan nama domain, protokol dan port yang sama seperti halaman di mana ia berada. Walau bagaimanapun, dalam pembangunan sebenar, kita sering perlu meminta sumber daripada nama domain yang berbeza atau subdomain yang berbeza. Pada masa ini, anda perlu menggunakan CORS untuk menyelesaikan masalah merentas domain.

Nginx ialah perisian pelayan web sumber terbuka yang berkuasa yang boleh dikonfigurasikan sebagai pelayan proksi terbalik untuk menyediakan sumber statik dan permintaan proksi. Melaksanakan konfigurasi CORS dalam Nginx boleh menyelesaikan masalah silang domain hadapan. Di bawah, kami akan memperkenalkan secara terperinci cara mengkonfigurasi dan melaksanakan CORS dalam Nginx.

Mula-mula, tambahkan blok kod berikut dalam fail konfigurasi Nginx:

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,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        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 = 'GET') {
        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';
    }
    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,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
    }
}

Dalam kod di atas, kami menggunakan arahan add_header untuk menetapkan maklumat pengepala respons dan melaksanakan konfigurasi CORS. Khususnya, pengepala Access-Control-Allow-Origin ditetapkan kepada *, menunjukkan bahawa semua asal-usul dibenarkan. Kemudian, kami menetapkan pengepala Access-Control-Allow-Methods untuk membenarkan kaedah permintaan menjadi GET, POST dan OPTIONS. Seterusnya, untuk menyokong permintaan yang jenis kandungannya ialah aplikasi/json dan format lain, kami menetapkan pengepala Access-Control-Allow-Headers. Akhir sekali, kami menggunakan pengepala Access-Control-Expose-Headers untuk menetapkan pengepala permintaan yang boleh dikembalikan oleh pelayan. add_header指令来设置响应头信息，实现CORS配置。具体来说，设置了Access-Control-Allow-Origin头为*，表示允许所有来源。然后，我们设置了Access-Control-Allow-Methods头，允许请求方法为GET、POST和OPTIONS。接下来，为了支持contentType为application/json等格式的请求，我们设置了Access-Control-Allow-Headers头。最后，我们使用Access-Control-Expose-Headers头来设置服务器可以返回的请求头。

接下来，重新启动Nginx服务器，使配置生效。

配置完成后，Nginx会根据设置的相应头信息，在响应中添加CORS相关的头部信息。这样，当浏览器发起跨域请求时，服务器会返回这些头部信息，浏览器就能正常处理跨域请求了。

需要注意的是，由于CORS配置的开放性，可能存在安全风险。如果有必要，可以根据具体的业务需求，限制Access-Control-Allow-Origin

Seterusnya, mulakan semula pelayan Nginx untuk menjadikan konfigurasi berkuat kuasa.

Selepas konfigurasi selesai, Nginx akan menambah maklumat pengepala berkaitan CORS pada respons berdasarkan set maklumat pengepala yang sepadan. Dengan cara ini, apabila penyemak imbas memulakan permintaan merentas domain, pelayan akan mengembalikan maklumat pengepala ini dan penyemak imbas boleh mengendalikan permintaan merentas domain seperti biasa. 🎜🎜Perlu diingatkan bahawa disebabkan sifat terbuka konfigurasi CORS, mungkin terdapat risiko keselamatan. Jika perlu, anda boleh mengehadkan nilai pengepala Access-Control-Allow-Origin kepada nama domain yang sah berdasarkan keperluan perniagaan tertentu. Dengan cara ini, hanya nama domain yang ditentukan boleh meminta sumber pelayan merentas domain. 🎜🎜Ringkasnya, menggunakan Nginx untuk mengkonfigurasi CORS boleh menyelesaikan masalah silang domain bahagian hadapan dengan berkesan. Dengan menetapkan maklumat pengepala respons yang sepadan, kami boleh mencapai perkongsian sumber merentas domain yang lebih fleksibel. Saya harap artikel ini boleh membantu anda dan menikmati kegembiraan pembangunan merentas domain! 🎜

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