[Kompilasi dan Ringkasan] Beberapa pengepala respons praktikal yang mesti diketahui oleh bahagian hadapan

Membaca artikel ini, anda akan:

• Ketahui beberapa super praktikal pengepala respons , selesaikan masalah yang anda hadapi di tempat kerja.

• bukan sahaja menyelesaikan masalah, tetapi juga memberi anda kelebihan apabila anda bertentangan dengan bahagian belakang dan operasi serta penyelenggaraan.

Adakah penting untuk mempelajari pengepala respons?

Ia sangat penting.

Jika anda tidak percaya saya, lihat adegan di bawah, adakah ia kelihatan biasa?

1. Adakah anda bimbang tentang pratonton dan muat turun?

1.1 Adegan

Saya mendengar daripada rakan sekerja saya lebih daripada sekali , rakan kumpulan membincangkan isu ini:

"Halaman belakang menyediakan muat turun fail txt (atau pdf/'json' dsb.) url, yang boleh saya gunakan a Apabila label dibuka, ia bertukar menjadi pratonton... Apakah yang perlu saya lakukan? "

Pada masa ini, seseorang akan mengesyorkan FileSaver.js atau "Simpan aliran bacaan tulisan tangan sebagai".

Kemudian orang lain bergema...

Saya:? ? ?

Adakah ini masalah yang memerlukan penulisan kod untuk diselesaikan?

Jika anda telah memahami Content-Disposition ini Response Header, maka anda mesti tahu bahawa masalah itu boleh diselesaikan dengan hanya menambah satu baris pada pengepala respons.

1.2 Pengenalan

Content-Disposition: Pengepala respons ini boleh menentukan sama ada kandungan itu pratonton atau muat turun.

Ia menyokong tiga format nilai:

• Content-Disposition: inline
  Pada masa ini, badan mesej akan dipaparkan sebagai sebahagian daripada halaman atau keseluruhan halaman . (Pratonton)

• Content-Disposition: attachment
  Isi mesej harus dimuat turun, nama fail lalai berkaitan dengan format url.

• Content-Disposition: attachment; filename="filename.jpg"
  Isi mesej harus dimuat turun, nama fail lalai boleh ditentukan.

Nota: Jika anda perlu pratonton, anda perlu memakannya dengan Content-Type yang sesuai; 🎜>

Untuk tujuan ini, saya menulis khas

contoh kecil. Saya mungkin menulis tiga laluan di bawah aplikasi

, seperti berikut:

express

Kemudian saya mengakses tiga laluan masing-masing, dan kesannya berbeza:

express

const user = {
  name: "摸鱼的春哥",
  blogUrl: "https://juejin.cn/user/1714893870865303"
}

const contentDispositionInline = async (req, res, next) => {
  res.setHeader('Content-Disposition', 'inline')
  res.send(user)
}

const contentDispositionFilename = async (req, res, next) => {
  res.setHeader('Content-Disposition', 'attachment; filename="chunge.json"')
  res.send(user)
}

const contentDispositionNoFilename = async (req, res, next) => {
  res.setHeader('Content-Disposition', 'attachment')
  res.send(user)
}

2. Projek telah dinaik taraf.

2.1 Senario

Pelaksanaan: "Maklum balas pelanggan

masih belum dibetulkan Anda: "Abang, betul-betul betul , atau adakah anda meminta pelanggan mengosongkan cache? "Pelaksanaan: "Hah? Jangan sekali-kali mengharapkan pelanggan anda melakukannya

"Hanya mereka dalam R&D memahami" operasi

. Jangan kaitkan masalah anda dengan Bugcache penyemak imbas
sama ada.

Cache penyemak imbas

dicipta untuk mengoptimumkan pengalaman pengguna, bukan untuk menghalang pengguna.

Oleh itu, memahami cara menggunakan pengepala respons adalah kemahiran yang mesti diketahui untuk bahagian hadapan.

2.2 Pengenalan

Cache-Control: Digunakan untuk menentukan mekanisme caching.

Caching, sebagai pengetahuan yang mesti diketahui untuk esei lapan bahagian hadapan, saya percaya semua orang sudah biasa dengannya. Atribut

biasa adalah seperti berikut:

Response Header属性	值	含义
cache-control	no-store	不缓存，这个会让客户端、服务器都不缓存，也就没有所谓的强缓存、协商缓存了。
cache-control	public	表明响应可以被任何对象（包括：发送请求的客户端，代理服务器，等等）缓存，即使是通常不可缓存的内容。（例如：1.该响应没有max-age指令或Expires消息头；2. 该响应对应的请求方法是 POST 。）
cache-control	private	表明响应只能被单个用户缓存，不能作为共享缓存（即代理服务器不能缓存它）。私有缓存可以缓存响应内容，比如：对应用户的本地浏览器。
cache-control	max-age=	设置缓存存储的最大周期，超过这个时间缓存被认为过期(单位秒)。与Expires相反，时间是相对于请求的时间。

• Tiada caching
  Tiada caching adalah yang paling mudah untuk difahami Setiap permintaan akan diambil daripada pelayan tanpa sebarang caching.
  Strategi ini hanya perlu diberi Cache-Control: no-store pengepala respons.
• Cache Kuat
  Sesetengah fail sumber hampir tidak akan berubah (contohnya, jika ia telah hash化命名的文件), ia boleh diperolehi terus daripada cache setempat Ini adalah apa yang dipanggil Kuat Cache ;
  Anda boleh menentukan mekanisme sebagai caching kuat melalui cache-control: public/private atau cache-control: max-age=.
• Caching Rundingan
  Ini adalah mekanisme caching yang lebih kompleks Pelaksanaannya tidak lagi boleh dinyatakan secara ringkas dan kasar melalui pengepala respons Sebaliknya, ia memerlukan bahagian hadapan dan belakang. tamatkan kerjasama.
  Ringkasnya, setiap kali sumber diminta, bahagian hadapan akan menulis respons sebelumnya hash dan bertanya kepada pelayan sama ada sumber itu telah berubah, untuk mencapai kesan caching yang tepat .
  Artikel ini tidak akan dijelaskan secara terperinci Jika anda berminat, anda boleh merujuk artikel ini: juejin.cn/post/703078…

2.3 Bagaimana untuk menggunakannya dalam pengeluaran sebenar?

• Mana-mana sumber yang namanya mempunyai nilai hash boleh dicache dengan kuat.
  (Lagipun, sebaik sahaja kandungan berubah, hash nama juga akan berubah)
• Untuk mana-mana perpustakaan pihak ketiga yang diperkenalkan melalui cdn, adalah disyorkan untuk membawa maklumat versi, yang juga boleh mendayakan caching yang kuat.
  (contohnya, /xx/xx/jquery.min.js ditukar kepada jquery@3.6.0/dist/jquery.min.js)
• Untuk fail dengan nama tetap seperti html dan ico, disyorkan untuk bukan cache atau berunding Cache .

3 Cookie saya tidak boleh secomel ini!

Senario 3.1

"Abang Chun, Abang Chun, kenapa saya berjaya log masuk tetapi permintaan masih 401?"

"Abang Chun, Abang Chun, kenapa saya tidak dapat nilai yang saya depositkan cookie?"

"Abang Chun, Abang Chun, ini rosakcookie Adakah ia jelas berharga dalam pelayar, tetapi mengapa saya tidak dapat mengaksesnya? pengepala respons dipanggil

? Itu sahaja! Itu sahaja! Semua jenis anomali tentang

bergantung padanya

set-cookie

3.2 Pengenalan

dahulunya merupakan ambang yang tidak boleh dilewati dalam pembangunan cookie Kini kewujudannya semakin lemah, tetapi projek-projek besar yang sedia ada tidak akan hilang kerana trend teknologi mereka masih bernilai dan masih perlu dikekalkan.

Dan pengepala respons ialah teras protagonis pertama

sistem

. CookieWeb

set-cookie: Ia adalah pengepala respons, yang diberikan oleh pelayan, membenarkan penyemak imbas menjana Cookie dan mengehadkan pelbagai ciri .

Ciri-ciri ini termasuk:

• Had masa tamat tempoh; Expires=<date></date>
• Kitaran hayat Max-Age=<number></number>
  Bilangan saat yang perlu berlalu sebelum kuki tamat tempoh. 0 atau -1 langsung tidak sah; atribut ini mempunyai keutamaan yang lebih tinggi daripada Expires.
• Nama domain; Domain=<domain-value></domain-value>
  Nyatakan domain di mana cookie hanya boleh dijana; >
mempunyai strategi kawalan yang lebih terperinci daripada
• , malah boleh menghantar Path=<path-value></path-value> hanya apabila laluan
  ditentukan. Domainxx hanya dijana dalam Cookie;
• Jika terdapat atribut Https dalam pengepala Secure, penyemak imbas hanya akan menjana dan menghantar
  dalam set-cookie persekitaran. SecureHttpsLumpuhkan operasi Cookie
;
• jsJika terdapat atribut API dalam pengepala HttpOnly, maka penjanaan, membaca, menulis dan menghantar
  atribut hanya boleh dilakukan dengan menyemak imbas Pelayan dikawal melalui "pengepala respons" dan tidak lagi membenarkan bahagian hadapan beroperasi set-cookie melalui HttpOnly. Sama ada Cookiejs dibenarkan untuk dibawa merentasi domain; Cookie
menyokong atribut termasuk
• , SameSite=<samesite-value></samesite-value> dan
  , yang masing-masing mewakili: StrictLaxNone : Bukan merentas domain sama sekali Bawa;
  • Strict: hanya dibenarkan dibawa apabila menavigasi dari tapak luar ke tapak asal
  • LaxCookie: silang-. domain juga dibenarkan, tiada sekatan.
  • None
3.3 Analisis Pembangunan Soalan Lazim

Mengapa anda berjaya log masuk tetapi permintaan masih

?

• Banyak projek awal menggunakan 401 sebagai cara pengenalan pengguna Contohnya, projek

  menggunakan nilai

  sebagai pengenalan untuk menentukan sama ada anda berada dalam sesi semasa. CookieSpring MVCBagi fenomena "log masuk, tetapi masih Cookie", jika tiada masalah di bahagian pelayan, mungkin JSeesionIdpelayar sebenarnya tidak menyimpan kuki

  .

  401Dalam erti kata lain, setiap kali anda membuat permintaan, pelayan menganggap anda adalah sesi baharu, dan anda bukan orang yang sama seperti kali terakhir anda

  log masuk

  . Jika anda berada dalam persekitaran , anda mungkin mahu mengalih keluar atribut buat sementara waktu.

  httpSecureTidak dapat menyimpan atau mengeluarkan?

  Sahkan dahulu sama ada
mempunyai sekatan domain
• , sama ada

  mempunyai sekatan laluan
  , sama ada mempunyai ?Selesaikan masalah mereka satu demi satu dan masalah tidak Sukar untuk diselesaikan. HttpOnly
  (Belajar perkongsian video:

  bahagian hadapan web
)

Atas ialah kandungan terperinci [Kompilasi dan Ringkasan] Beberapa pengepala respons praktikal yang mesti diketahui oleh bahagian hadapan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!