htaccess 重写条件将 css 和 js 文件更改为索引页面内容
Posted
技术标签:
【中文标题】htaccess 重写条件将 css 和 js 文件更改为索引页面内容【英文标题】：htaccess rewrite condition changing css and js files to the index page content 【发布时间】：2014-01-17 01:00:14 【问题描述】：我最近完成了有关 php MVC 的阅读，我想做一个 MVC 的 ajax 版本，但我遇到了 MIME 类型的问题。我想要做的是将所有服务器调用重定向到index.html 页面，所以如果用户转到一个不存在的页面，该页面将加载索引页面，然后 ajax 可以使用 uri 来做这件事。
没有 htaccess 文件一切正常，但是当取消注释时，我会遇到浏览器无法读取 CSS、JS 和任何链接图像的问题，因为根据控制台将 MIME 类型设置为 HTML。
[编辑]
在 fiddler 中进一步检查后，似乎浏览器正在发送 index.html 文件而不是 CSS 和 javascript 文件，所以我似乎需要能够在它是一个例外的情况下CSS 或 JS 文件。但我认为这是 RewriteCond -f || 的目的-d 在 htaccess 文件中..
从上次编辑中我发现我可以对 rewriteCond 进行例外处理以允许 CSS 和 JS 文件通过。但是现在在 ajax 调用中使用的 PHP 文件正在显示 HTML 内容...我对 htaccess 文件所做的更改如下
RewriteEngine On
RewriteCond &REQUEST_FILENAME !-f
RewriteCond &REQUEST_FILENAME !-d
RewriteCond %REQUEST_URI !css$
RewriteCond %REQUEST_URI !js$
RewriteCond %REQUEST_URI !php$
RewriteRule (.*) index.html [L]
[/edit]
这里是复制我正在测试的部分，你可以在你的本地主机上运行。
https://www.dropbox.com/s/qx0d76xjvfuz681/ajaxTest.zip
感谢您的帮助，
安德鲁
htaccess
RewriteEngine On
RewriteCond &REQUEST_FILENAME !-f
RewriteCond &REQUEST_FILENAME !-d
RewriteRule (.*) index.html [L]
index.html
<html>
<head>
<meta charset="utf-8">
<title>ajax mvc test</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<nav>
<ul>
<li><a href="one" class="links link1">one</a></li>
<li><a href="two" class="links link2">two</a></li>
<li><a href="three" class="links link3">three</a></li>
</ul>
</nav>
<div class="main"></div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
main.css
body
background: #f2f2e6;
font-family: sans-serif;
h2
font-size: 2em;
color: #5a2306;
main.js
(function()
// get the address of the webpage
var url = window.location.pathname,
// get the breadcrumb
urlrep = url.match(/(.*)index\.html/)[1],
// create regEx to test later
address = new RegExp(urlrep);
function update(method)
// update the history of the webpage
var state =
data: "this is the data",
title: "title",
url: method
updated(method);
history.pushState(state, state.title, state.url);
function updated(method)
// run the ajax call
if(method !== 'index')
console.log("not matched index no ajax call");
ajaxPost(method + '.php');
var nav = document.getElementsByClassName('links');
// set event listeners on links
for (var i = 0; i < nav.length; i++)
(function(x)
nav[x].addEventListener('click', function(e)
e.preventDefault();
console.log("textContent: " + e.target.textContent);
update(e.target.textContent);
);
)(i);
;
// set event listener to browser popstate
window.addEventListener('popstate', function(e)
var rep = window.location.pathname.replace(address, '').replace(/\.html/, '');
console.log("popstate: " + rep);
updated(rep);
);
// run the ajax call.
function ajaxPost(address)
var ajax,
main = document.getElementsByClassName('main')[0];
console.log("address: " + address);
ajax = new XMLHttpRequest();
ajax.onreadystatechange = function()
if(ajax.readyState == 1)
// sendFunc
main.innerHTML = "";
if(ajax.readyState == 4)
// returnFunc
main.innerHTML = ajax.responseText;
ajax.open('post', address, true);
ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");
ajax.send();
)();
one.php
<?php
echo "<h2>one</h2>";
echo "<p>Its like a symbology of this of your mouth is eating food, from your mouth to your heart, is your freedom and your independence and your identity. The best way to communicate is compatible. Compatible communication is listening with open ears and an open mind, and not being fearful or judgemental about what you're hearing.</p>";
echo "<p>Ipsum text generated by<a href=\"http://www.buseyipsum.com\"> Busey Ipsum </a> </p>";
?>
两个.php
<?php
echo "<h2>two</h2>";
echo "<p>This is just common superficiality. Is thats whats so special about a woman? Superficiality with their face colours? This is just common superficiality. Is thats whats so special about a woman? Superficiality with their face colours?</p>";
echo "<p>Ipsum text generated by<a href=\"http://www.buseyipsum.com\"> Busey Ipsum </a> </p>";
?>
三个.php
<?php
echo "<h2>three</h2>";
echo "<p>I would like to give you a backstage pass to my imagination. Have you urinated? Have you drained your bladder? Are you free? Because if you havent it will only come out later. I'm giving you some information that your bodily fluids may penetrate your clothing fibre's without warning.</p>";
echo "<p>Ipsum text generated by<a href=\"http://www.buseyipsum.com\"> Busey Ipsum </a> </p>";
?>
【问题讨论】：
【参考方案1】：我想出了解决办法。发生的事情是我的 css 和 js 文件是相对的，所以当我使用两层深的 uri 时，它将重写相对路径以包含 uri 的第一部分。例如，我的 url 有两个深度，可以选择正确的类并应用正确的方法。
www.website.com/className/method
我的 css 和 js 地址采用类名，因此在此示例中 href="style.css" 不是在顶部文件夹中查找，而是采用类的名称并将其添加到相对字符串中，例如 href="className/style.css"存在。我最初解决它的方法是使用 if 语句检查 uri 的爆炸计数。但更好的解决方案是像这样在 htaccess 文件中执行此操作
RewriteEngine On
# rewrite the css and js files if they have the className prepended to them.
RewriteCond %REQUEST_URI ^(.+)\/(.+)\.(css|js)$ [NS]
RewriteRule ^(.+)\/(.+)\.(css|js)$ $2.$3 [L]
# rewrite the uri to a get superglobal
RewriteCond %REQUEST_FILENAME !-d
RewriteCond %REQUEST_FILENAME !-f
RewriteCond %REQUEST_FILENAME !-l
RewriteRule ^(.+)$ index.php?url=$1 [QSA,L]
开发者工具仍然显示错误的文件路径，但提供了正确的文件，所以这不是一个大问题。
希望这可以帮助某人避免我所经历的头痛
【讨论】：
“我的 css 和 js 文件是相对的，所以当我使用两层深的 uri 时，它将重写相对路径以包含 uri 的第一部分” –这不是这里工作的服务器端重写——这只是 client 解析相对路径的方式。并且可以简单地反驳，通过在这些路径前加上/ 前缀来相对于域根链接，这里已经说过很多次了……
对不起，我不知道，在搜索结果中看不到。我会试一试。感谢您的回复。
刚刚尝试了您的建议@CBroe，但没有奏效。该示例只是帮助回答问题的示例。我所做的是一个单页应用程序，它可以使用 php 以 mvc 模式放入网站的任何位置，然后一旦网站加载 ajax 将处理其余的页面请求。以上是关于htaccess 重写条件将 css 和 js 文件更改为索引页面内容的主要内容，如果未能解决你的问题，请参考以下文章
.htaccess：使用 RewriteCond 但对 IMAGES/JS/CSS 文件的hrefs仍然被不必要地重写[重复]