0
398
ViewsProblemas de representación de JS y CSS después de la regla de reescritura de URL del archivo .htaccess
Estoy usando el servidor WAMP en mi PC como host local. Quiero volver a escribir mi URL sin la extensión PHP y eliminar la cadena de consulta (pero legible) desde http://myproject/post.php?page=page_slug hasta http://myproject/post/page_slug y debería poder leer "page_slug" a través echo $_GET['page']; en la página "post.php". Para este propósito, tengo un proyecto con una jerarquía simple que se comparte a continuación.
Carpeta de proyecto:
- ->css/estilo.css
- ->imagen/logotipo.jpg
- ->js/script.js
- ->.htaccess
- ->index.php
- ->acerca de.php
- ->contacto.php
- ->blog.php
- ->post.php
- ->pagina.php
Ahora quiero eliminar todas las extensiones .PHP de mi URL, así que utilicé el siguiente código .htaccess y funciona bien.
# Options is required by Many Hosting Options +MultiViews #Remove .PHP Extension And Force Redirect To Without .PHP File Name In URL RewriteEngine On RewriteBase / RewriteCond %{THE_REQUEST} ^[AZ]{3,}\s([^.]+)\.php [NC] RewriteRule ^ %1 [R=301,L] RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME}.php -f RewriteRule ^(.*?)/?$ $1.php [NC,L] #RewriteCond %{THE_REQUEST} \s([^?]*)\?p=(\S+)\s [NC] #RewriteRule ^ %1/%2? [R=301,L] Después del código anterior, puedo volver a escribir mis URL de http://myproject/post.php?page=page_slug a http://myproject/post?page=page_slug , lo que significa que la extensión .PHP ahora se eliminó con éxito.
Ahora, para hacer que mi URL esté libre del patrón de cadena de consulta, utilicé el siguiente código después del código anterior en mi archivo .htaccess.
RewriteCond %{THE_REQUEST} \s([^?]*)\?p=(\S+)\s [NC] RewriteRule ^ %1/%2? [R=301,L] Después del código anterior, puedo volver a escribir mis URL de http://myproject/post?page=page_slug a http://myproject/post/page_slug , lo que significa que la cadena de consulta ahora se eliminó con éxito, pero mi JS y CSS están rotos. ahora como se muestra a continuación.
Pero todos mis archivos son perfectos, ya que cuando elimino el segundo conjunto de códigos superior, funciona correctamente. Además, se están cargando bien como se muestra a continuación.
Noté una cosa: los datos de mis archivos CSS y JS ahora se cambian con los datos de mi archivo PHP, como se muestra a continuación. por que pasa esto...???
Entonces, ¿cuál es la solución para esto...??? Además, recuerde que necesito leer los parámetros de QUERY STRING también en mi archivo.
1 answers
Answer question0
El "problema" es que parece estar utilizando rutas URL relativas a sus recursos estáticos (CSS, JS e imágenes). Este es un problema de resolución de URL del lado del cliente. Debe usar direcciones URL relativas a la raíz (comenzando con una barra oblicua) o absolutas (con esquema + nombre de host) para sus activos para que puedan ubicarse independientemente de la profundidad de la ruta de la URL. (Tenga en cuenta que cualquier solicitud que realice su JS, por ejemplo, AJAX, también debe ser relativa a la raíz o absoluta).
El problema no es tanto con .htaccess , pero cuando cambia la URL de /post.php?page=page_slug a /post/page_slug entonces cualquier URL relativa del lado del cliente se resolverá en relación con /post/ , no / ( la raíz del documento) como antes.
La solicitud de los archivos JS (y CSS) da como resultado un 404, por lo que es muy probable que el documento de error HTML 404 se analice como JS y falle (es decir, "Error de sintaxis no detectado: token inesperado: '<'" - debido a un <!DOCTYPE html> o abriendo la etiqueta <html> ).
Una posible solución (para evitar cambiar sus URL) es usar un elemento HTML base en la sección de head para indicar con qué URL relativas deben resolverse, anulando la URL del documento actual. Sin embargo, esto tiene algunas advertencias adicionales si está utilizando anclajes en la página de la forma href="#element" , ya que ahora se resolverán en relación con el documento indicado en el elemento base y no con el documento actual.
Vea también mi respuesta a la siguiente pregunta en la pila de Webmasters que entra en más detalles sobre esto: