使用.htaccess隐藏index.php并使用pathinfo导致CSS和JS加载错误

160 篇文章 ¥59.90 ¥99.00
在使用.htaccess隐藏index.php并启用pathinfo时,可能导致CSS和JS加载失败。本文分析了问题原因,提供了修改.htaccess文件和调整引用路径的解决方案,确保在保持URL美观的同时,正确加载资源文件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在网站开发中,我们经常希望隐藏URL中的"index.php"等文件名,以提高URL的可读性和美观性。为了实现这一目标,我们可以使用.htaccess文件来重写URL,并使用pathinfo来解析URL中的路径信息。然而,有时候在隐藏index.php并使用pathinfo的过程中,可能会导致CSS和JS文件无法正确加载。本文将详细介绍这个问题的背景、原因和解决方法,并提供相应的代码示例。

背景

.htaccess是一个配置文件,用于在Apache服务器上控制网站的行为。它可以用来重写URL、设置访问权限和处理错误等。通过.htaccess文件,我们可以使用RewriteRule指令将URL中的"index.php"等文件名隐藏起来,并使用pathinfo来解析URL中的路径信息。

问题原因

当我们使用.htaccess隐藏index.php并使用pathinfo时,网页中引用的CSS和JS文件的路径也会受到影响。默认情况下,这些文件的路径是相对于网站根目录的,但在使用pathinfo时,URL的路径信息会被解析到$_SERVER[‘PATH_INFO’]变量中,导致CSS和JS文件的相对路径不正确,进而无法正确加载。

解决方法

为了解决CSS和JS文件加载错误的问题,我们需要对.htaccess文件进行修改,并在网页中使用绝对路径来引用这些文件。下面是具体的解决方法。

步骤1:修改.htaccess文件

打开网站根目录下的.htaccess文件,并在其中添加以下代码:


                
我需要你帮我修复 能够让ttf这种字体 在安卓小程序成功被加载 项目是tp5 在宝塔上 , 运行目录是public 开启了伪静态 字体文件路径是 https://yinzhang.jinshelby.com/xcx/font/kaiti2.ttf 这是我的nginx配置: user www www; worker_processes auto; error_log /www/wwwlogs/nginx_error.log crit; pid /www/server/nginx/logs/nginx.pid; worker_rlimit_nofile 100000; stream { log_format tcp_format '$time_local|$remote_addr|$protocol|$status|$bytes_sent|$bytes_received|$session_time|$upstream_addr|$upstream_bytes_sent|$upstream_bytes_received|$upstream_connect_time'; access_log /www/wwwlogs/tcp-access.log tcp_format; error_log /www/wwwlogs/tcp-error.log; include /www/server/panel/vhost/nginx/tcp/*.conf; } events { use epoll; worker_connections 51200; multi_accept on; } http { include mime.types; # 已经包含标准字体类型定义 # 修正 MIME 类型定义(移除重复项) # 手动添加字体类型映射 types { font/truetype ttf; font/opentype otf; # application/font-woff woff; # application/font-woff2 woff2; } # 确保默认类型设置正确 default_type application/octet-stream; } # 移除重复的 default_type # default_type application/font-sfnt; // 注释掉这行 default_type application/octet-stream; #include luawaf.conf; include proxy.conf; server_names_hash_bucket_size 512; client_header_buffer_size 32k; large_client_header_buffers 4 32k; client_max_body_size 300m; sendfile on; tcp_nopush on; keepalive_timeout 60; tcp_nodelay on; fastcgi_connect_timeout 3000; fastcgi_send_timeout 3000; fastcgi_read_timeout 3000; fastcgi_buffer_size 64k; fastcgi_buffers 4 64k; fastcgi_busy_buffers_size 128k; fastcgi_temp_file_write_size 256k; fastcgi_intercept_errors on; gzip on; gzip_min_length 1k; gzip_buffers 4 16k; gzip_http_version 1.1; gzip_comp_level 2; gzip_types text/plain application/javascript application/x-javascript text/javascript text/css application/xml; gzip_vary on; gzip_proxied expired no-cache no-store private auth; gzip_disable "MSIE [1-6]\."; limit_conn_zone $binary_remote_addr zone=perip:10m; limit_conn_zone $server_name zone=perserver:10m; server_tokens off; access_log off; server { listen 888; server_name phpmyadmin; index index.html index.htm index.php; root /www/server/phpmyadmin; location ~ /tmp/ { return 403; } #error_page 404 /404.html; include enable-php.conf; location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ { expires 30d; } location ~* ^/xcx/font/.*\.(ttf|otf|woff|woff2)$ { root /www/wwwroot/yinzhang.jinshelby.com/public; # 添加详细日志 access_log /www/wwwlogs/font_access.log; error_log /www/wwwlogs/font_error.log notice; # # 强制设置正确的 Content-Type(重点) # if ($uri ~ \.ttf$) { # add_header Content-Type "font/truetype" always; # } # if ($uri ~ \.otf$) { # add_header Content-Type "font/opentype" always; # } # if ($uri ~ \.woff$) { # add_header Content-Type "font/woff" always; # } # if ($uri ~ \.woff2$) { # add_header Content-Type "font/woff2" always; # } # CORS 支持 if ($request_method = 'OPTIONS') { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'Range'; add_header 'Access-Control-Max-Age' 1728000; add_header 'Content-Type' 'text/plain charset=UTF-8'; add_header 'Content-Length' 0; return 204; } add_header 'Access-Control-Allow-Origin' '*' always; add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS' always; add_header 'Access-Control-Allow-Headers' 'Range' always; add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always; # 缓存控制 expires 1y; add_header Cache-Control "public, max-age=31536000, immutable"; # 字节范围支持(安卓必需) add_header Accept-Ranges bytes; try_files $uri = 404; } location ~ .*\.(js|css)?$ { expires 12h; } location ~ /\. { deny all; } access_log /www/wwwlogs/access.log; } include /www/server/panel/vhost/nginx/*.conf; } 这是网站的配置: server { listen 80; listen 443 ssl http2 ; server_name yinzhang.jinshelby.com; index index.php index.html index.htm default.php default.htm default.html; root /www/wwwroot/yinzhang.jinshelby.com/public; #CERT-APPLY-CHECK--START # 用于SSL证书申请时的文件验证相关配置 -- 请勿删除 include /www/server/panel/vhost/nginx/well-known/yinzhang.jinshelby.com.conf; #CERT-APPLY-CHECK--END #SSL-START SSL相关配置,请勿删除或修改下一行带注释的404规则 #error_page 404/404.html; #HTTP_TO_HTTPS_START if ($server_port !~ 443){ rewrite ^(/.*)$ https://$host$1 permanent; } #HTTP_TO_HTTPS_END ssl_certificate /www/server/panel/vhost/cert/yinzhang.jinshelby.com/fullchain.pem; ssl_certificate_key /www/server/panel/vhost/cert/yinzhang.jinshelby.com/privkey.pem; ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3; ssl_ciphers EECDH+CHACHA20:EECDH+CHACHA20-draft:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5; ssl_prefer_server_ciphers on; ssl_session_tickets on; ssl_session_cache shared:SSL:10m; ssl_session_timeout 10m; add_header Strict-Transport-Security "max-age=31536000"; error_page 497 https://$host$request_uri; #SSL-END #引用重定向规则,注释后配置的重定向代理将无效 include /www/server/panel/vhost/nginx/redirect/yinzhang.jinshelby.com/*.conf; #ERROR-PAGE-START 错误页配置,可以注释、删除或修改 #error_page 502 /502.html; #ERROR-PAGE-END #PHP-INFO-START PHP引用配置,可以注释或修改 include enable-php-74.conf; #PHP-INFO-END #REWRITE-START URL重写规则引用,修改后将导致面板设置的伪静态规则失效 include /www/server/panel/vhost/rewrite/yinzhang.jinshelby.com.conf; #REWRITE-END #禁止访问的文件或目录 location ~ ^/(\.user.ini|\.htaccess|\.git|\.env|\.svn|\.project|LICENSE|README.md) { return 404; } #一键申请SSL证书验证目录相关设置 location ~ \.well-known{ allow all; } #禁止在证书验证目录放入敏感文件 if ( $uri ~ "^/\.well-known/.*\.(php|jsp|py|js|css|lua|ts|go|zip|tar\.gz|rar|7z|sql|bak)$" ) { return 403; } location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|ttf)$ { expires 30d; error_log /dev/null; access_log /dev/null; } location ~ .*\.(js|css)?$ { expires 12h; error_log /dev/null; access_log /dev/null; } access_log /www/wwwlogs/yinzhang.jinshelby.com.log; error_log /www/wwwlogs/yinzhang.jinshelby.com.error.log; } 这是我测试字体的返回结果: [root@iZ2ze39ozhhd4olqy1dh88Z ~]# curl -I https://yinzhang.jinshelby.com/xcx/font/st.ttf HTTP/2 200 server: nginx date: Fri, 04 Jul 2025 08:21:33 GMT content-type: application/octet-stream content-length: 7001536 last-modified: Tue, 24 Jun 2025 09:10:03 GMT etag: "685a6b6b-6ad5c0" expires: Sun, 03 Aug 2025 08:21:33 GMT cache-control: max-age=2592000 strict-transport-security: max-age=31536000 accept-ranges: bytes
最新发布
07-05
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值