Bagaimanakah Nginx menyelesaikan masalah 404 penyegaran halaman dalam mod sejarah?

Pengetahuan prasyarat

• Aplikasi halaman tunggal (SPA - aplikasi halaman tunggal)
  Hanya muatkan halaman untuk kali pertama Apabila, satu-satunya halaman HTML dan sumber statik awamnya dikembalikan, dan lompatan halaman berikutnya tidak akan mengambil fail HTML daripada pelayan. (Hash dan penghalaan sejarah melaksanakan perubahan URL penyemak imbas tanpa memuat semula halaman)

• penghalaan cincang
  Contoh: www.baidu.com/#/home, pada asalnya cincang digunakan untuk menggabungkan The anchor point merealisasikan kawalan paparan halaman Apabila nilai selepas # berubah, halaman tidak akan diminta semula Ini terutamanya dicapai melalui kaedah onhashchange.

• pengalihan sejarah
  Berbanding dengan penghalaan cincang, perubahan yang paling intuitif ialah tiada # dalam penghalaan Dengan memanggil satu siri kaedah pada objek window.history, the halaman tidak dimuat semula Jump(pushState, replaceState).

Dalam mod sejarah, kerana url telah berubah, jika anda memuat semula halaman secara manual pada masa ini, penyemak imbas berpendapat ia meminta halaman baharu (memulakan permintaan Http baharu), dan halaman baharu ialah Tidak wujud (jika bahagian belakang tidak dikonfigurasikan), menghasilkan 404.

Mari kita terangkan secara ringkas apa yang berlaku selepas memasukkan IP atau nama domain pada penyemak imbas (rasanya agak seperti soalan temuduga????) Selepas menekan Enter, http yang dihantar oleh pelayar akan meminta html. Selepas beberapa siri pemajuan dan penghuraian alamat, fail diterima oleh port 80 (lalai) pada pelayan di mana IP sasaran terletak Pada masa ini, masalah timbul Selepas antara muka pelayan menerima permintaan HTTP, ia tidak tahu apa yang perlu dilakukan. Untuk mengembalikan sesuatu, kali ini anda memerlukan Nginx untuk melaksanakan proksi sumber statik dan memberitahu pelayan fail statik yang hendak dikembalikan

Nginx

Untuk projek umum penyebaran, kita perlu mengendalikan fail konfigurasi conf
Apa yang anda perlu tahu tentang fail ini adalah seperti berikut

   ....
   # http 是指令块，针对http网络传输的一些指令配置
   http {
       #文件扩展名与文件类型映射表 
       include mime.types;
       #设置客户端与服务端请求的超时时间
       keepalive_timeout  65;
       # 开启压缩功能，目的：提高传输效率，节省带宽 
       gzip on
       server {
          #监听端口
          listen   80;
          #服务命名，最好就是用这个服务器的域名命名
          server_name localhost;
          #指令块，配置外部访问资源和实际资源的对应关系
          location /{
              root /usr/blog; #表示静态资源所在的目录
              index  index.html index.htm; #访问这个路径对应的默认静态资源文件或者网页
          }
       }
   }

lokasi

Sintaks

   location [=|~|~*|^~|@] uri { ... } 
   location @name { ... }

• =: menunjukkan padanan tepat

• ~: Menunjukkan padanan biasa sensitif huruf besar/kecil

• ~*: Menunjukkan padanan biasa tidak sensitif huruf besar/kecil

• ^~: Menunjukkan bahawa URI bermula dengan rentetan biasa

• !~: Menunjukkan ketidakpadanan ungkapan biasa sensitif huruf kecil

• !~*: Menunjukkan tidak padanan biasa tidak peka huruf besar dan kecil

• /: Padanan universal, sebarang permintaan akan dipadankan dengan

Peraturan padanan biasa

   # 将所有请求直接转发给服务器的9090端口
    location = / {
      proxy_pass http://127.0.0.1:9090/;
    }
    # 目录匹配 
    location ^~ /static/ { 
        root /webroot/static/;
    } 
    # 后缀匹配 
    location ~* \.(gif|jpg|jpeg|png|css|js|ico)$ { 
        root /webroot/res/; 
    }
    # 将/account/开始的请求转发给Account服务器
    location /account/ {
        proxy_pass http://127.0.0.1:8080/
    }
    # 将/order/开始的请求转发给Order服务器
    location /order/ {
        proxy_pass http://127.0.0.1:9090/
    }

< Perbezaan antara 🎜>root dan alias

ialah cara nginx mentafsir url selepas lokasi

[root]

Sintaks : laluan akar
Nilai lalai: root html
Bahagian konfigurasi: http, pelayan, lokasi, jika
Hasil pemprosesan: laluan akar + laluan lokasi

[alias]

Sintaks: laluan alias
Bahagian konfigurasi :lokasi
Hasil pemprosesan: Gunakan laluan alias untuk menggantikan laluan lokasi

   # 返回/www/root/html/t/a.html的文件
   location ^~ /t/ { 
       root /www/root/html/;
   } 
   # 返回/www/root/html/new_t/a.html的文件 
   # 把location后面配置的路径丢弃掉，把当前匹配到的目录指向到指定的目录。 
   location ^~ /t/ { 
       alias /www/root/html/new_t/; 
   }

Selesaikan masalah 404 selepas memuat semula

Daripada pengetahuan di atas, kita boleh tahu bahawa selepas menyegarkan, penyemak imbas akan Url semasa digunakan untuk meminta fail html, tetapi SPA hanya mempunyai satu fail html, jadi anda perlu mengkonfigurasi baris kod

di lokasi yang sepadan daripada nginx.conf untuk memberitahu nginx untuk menyemak sama ada fail itu wujud mengikut urutan, dan jika ia tidak wujud, ubah hala ke fail htmltry_files $uri $uri/ /index.html;

Atas ialah kandungan terperinci Bagaimanakah Nginx menyelesaikan masalah 404 penyegaran halaman dalam mod sejarah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!