apache configuration for react-router with browserHistory and baseName subdirectory - apache

My application is in a subdirectory of the main web site. I have implemented basename and browserHistory and put the following recommended apache rewrite code into .htaccess in the app folder:
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.html [L]
This recommended apache rewrite works to return browserHistory URLs to the application index.html. For some reason (see below), it does not find the "style.css" and "brundle.js" that are EMBEDDED in the index page HTML. The only thing that I can see that I have different in the example .htaccess file is that I have a RewriteBase value of "/react_librivox_search" because my application is in that subfolder of the site.
RewriteBase /react_librivox_search
I have tested using various different beginning and ending slashes for paths and files in .htaccess, and the problem is not that.
The problem seems to be that the react application is setting a GET value for the files that includes a part of the PATH variable that is supposedly only a part of the react-router definition:
<Route path="/book/:id" component={BookDataDisplay}/>
Note that the additional path segment "/book/" is being appended to the base URL, and when files are not found in THAT directory (which does not really exist), the server returns "index.html" for the missing files, which accounts for the mime-type error for the librivox_search.css file and the "<" error for the bundle.js file.
The stylesheet http://jstest.dd:8083/react_librivox_search/book/librivox_search.css was not loaded because its MIME type, “text/html”, is not “text/css”. librivox_search.css (embedded in index.html)
SyntaxError: expected expression, got '<' bundle.js (embedded in index.html)
The same unexpected addition of "book" to the URL is at work here as well. Neither of the embedded index.html files is in that subdirectory. But I want to maintain that "book" in the path, since it identifies what KIND of data is being passed to the route . . . which distinquishes it from other kinds of data. I just do not want to have it sent to the SERVER (but perhaps that cannot be avoided), since the actual index.html embedded files are not there.
I suppose rewriting "/react_librivox_search/book" as "/react_librivxo_search" might work, but it seems to be a hacky way to go about it. And I don't want to have to put duplicate bundle.js files in multiple directories (that works, but
what a maintenance nightmare THAT would be, and no doubt bad practice).
Or is it recommended to put a separate .htaccess in a REAL "book" subfolder that returns "librivox_search.css" and "bundle.js" (in the base directory) depending on the file request?

Related

redirecting about.php to domain.com/About/ using .htaccess rewrite rules

When I write RewriteRule About About.php [L,QSA] in .htaccess to make users access example.com/About.php using the following link example.com/About/. Users can access it correctly if it was written as example.com/About only. If I added more backslack like this example.com/About/ the CSS files are not loaded. Also, if anyone accessed this link example.com/About/SomeText he didn't get error 404 he gets about.php page without loading CSS as well.
RewriteRule About About.php [L,QSA]
The problem with this rule is that it rewrites any URL that simply contains the word "About". So, /About/SomeText, /AnythingAbout and /AbcAboutXyz are all rewritten to About.php which processes the request. (It also rewrites itself, which is another matter!)
You need to be specific and match only requests for /About exactly. For example:
RewriteRule ^About$ About.php [L]
The first argument to the RewriteRule directive is a regex that matches against the requested URL-path (less the slash prefix).
The QSA flag is not required here.
If I added more backslack like this domain.com/About/ the CSS files are not loaded.
"backslack" - that is a (forward) "slash" (and not a "backslash" either).
This will happen if you are using relative URL-paths to access your CSS files (and other static resources like images and JS). The relative URL-path is resolved by the browser relative to the current URL. eg. If you are linking to your stylesheet with href="styles.css" and the current URL in the browser is /About/SomeText then the browser will naturally request /About/styles.css, not /styles.css as you might be expecting (when the URL is simply /About).
When rewriting the URL at different path depths you need to use either:
Root-relative (starting with a slash) URL-paths.
Absolute URLs (with scheme + hostname).
Specify a base element in the head section of the HTML source that tells the browser what URL should be used as the base for all relative URLs. Although there are caveats with this approach (as mentioned in the linked question below)
(Although, in restricting the above rule to match /About only then this naturally avoids this issue.)
See also my answer to the following question that goes into more detail on this:
JS and CSS Rendering Issues After .htaccess File URL Rewrite Rule

htaccess RewriteRule problems

I have a web page which works fine on live server. However some links to files (jpg, pdf and others) which are created with cms editor contain relative paths.
When I run that page on my local test server which serves the pages out of a sub folder of localhost the relative paths to the files are wrong since they are missing the subfolder at the beginning. The html page loads fine. It's just some files in it that have wrong path and won't load.
page loads from http://localhost/level1/
files are trying to load from http://localhost/level2/ and I get 404s.
They should be loading from http://localhost/level1/level2/
So I setup a RewriteRule to correct the path but no matter what I have tried I can't get it to work. I have tried various flags including [R,L] but nothing changes the URI in the html.
currently I have:
RewriteRule ^/level2/(.*)$ /level1/level2/$1 [R]
Any suggestions?
Thanks
Sounds like those links are not relative paths but absolute ones (starting with a leading slash (/). That is why the issue occurs at all. Relative paths make much more sense.
This would be the version to be used inside your http servers host configuration:
RewriteEngine on
RewriteRule ^/level2/(.*)$ /level1/level2/$1 [L,QSA]
Here the version for .htaccess style files (note the missing leading slash):
RewriteEngine on
RewriteRule ^level2/(.*)$ /level1/level2/$1 [L,QSA]
You could use a version that can be used in both situations:
RewriteEngine on
RewriteRule ^/?level2/(.*)$ /level1/level2/$1 [L,QSA]
Note however that in general one should always prefer to place such rules inside the http servers host configurations. .htaccess style files are notoriously error prone, hard to debug and they really slow down the server, often for nothing. .htaccess style files only offer a last option for those who are using a really cheap web hosting provider. Or for situations where a web application has to write its own rewrite rules, which obviously is a security nightmare on its own...

Allowing relative paths only

I believe this is an Apache .htaccess issue, and yet, maybe not. Maybe I am looking at the problem from the wrong angle, and thus can't find the proper solution.
I am building a web app + hybrid mobile app. I would like to share the exact same code base, without having to tweak anything manually to deploy my app to Android or iOS, otherwise, the process of deploying will be hacky and painful. What I want is to take the web app repository, shove it into Cordova's box (you dirty man ;), and it would deploy it successfully.
Now, one issue is that Cordova requires relative paths to work properly. For example, this is how I include my require.js file :
<script data-main="library/js/dependencies.js" src="library/js/libs/require.js">
</script>
This works fine on the hybrid app. This works fine also on most of the web app's URLs, those with the following scheme :
domain.com/view_name
However, this is what happens when I load the app from a view that receives URI parameters :
domain.com/view_name/6iwO4NyJqy
The relative paths are not resolved properly anymore. I get 404 error due to unproper paths. For instance, this is how is resolved the require.js file above :
http://domain.com/view_name/library/js/libs/require.js
The view_name bit is the wrong part. It should not be there. Without it, the file would be found successfully.
This is my .htaccess file :
RewriteEngine on
RewriteBase /
# REROUTING EVERYTHING TO index.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d [OR]
RewriteCond %{REQUEST_URI} ^/$
RewriteRule .* /index.html [NC,L,QSA]
Is there a way to set my .htaccess file, so that I don't need to modify the relative paths within the app, and still can have them resolved properly ?
Any suggestion is most welcome.
It is not caused by your rewrite rule, it is due to your use of relative paths.
You can add this just below <head> section of your page's HTML:
<base href="/" />
so that every relative URL is resolved from that base URL and not from the current page's URL.

mod_rewrite inserting full path to file

I need to create a rewrite to take traffic going to mp3/mp4 files in a specific subdirectory and then route them to a PHP file that tracks download stats etc before routing them to the actual file location since iTunes requires your podcast RSS contain actual media file extensions (.mp3, .mp4, etc)
I have created rewrites before with no problem but now I am running into an odd issue on this company's server.
My .htaccess located at www.company.com/companytools/podcasts
RewriteEngine on
RewriteRule ^/(.*).mp3$ /test.php?file=$1 [r=301,L]
Right now it is partially working it does act upon the mp3 file but ends up including the full path to test.php after the domain, so I end up with a 404 page looking for this URL:
www.company.com/www/internal/docs/companytools/podcasts/test.php?file=test
basically I need the path, but only the /companytools/podcasts part.
Any help is appreciated.
You may not need R=301 here to hide actual PHP handler.
Try this rule with RewriteBase:
RewriteEngine on
RewriteBase /companytools/podcasts/
RewriteRule ^(.+?)\.mp3$ test.php?file=$1 [L,QSA]

Configuring Apache to not rewrite URLs for FILE + SLASH

I have this problem where all URLs like context/path/file/anything/that/follows becomes context/path/file.php/anything/that/follows or context/path/file.xml/anything/that/follows.
I have the following rewrite rule:
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^service/(.*)$ service.php?xyz=1 [L,QSA]
which should map any URL starting with service/... to service.php. Now, problem is, if an XML file named service.xml is in the same folder as the .htaccess, the URLs are mapped to that file instead. If a PHP file exists, they go to the PHP file. The XML file takes precedence, i.e. if there is both an XML file and a PHP file with the name service.* in the directory, the XML file gets chosen.
I have PHP 5.3, Apache 2.x, on Mac OS X 10.7 (Lion). This problem did not previously occur when I had OS X 10.6, So there must be some changes in the configurations provided by Apple. I just cannot figure out what.
Is there a way I could disable this functoinality?
Or am I entirely off-track, and donig something stupid?
BTW, this does not relate to mod_rewrite, as enabling or disabling it, or removing the rewrite rule from the .htaccess changes anything. The URL service/my/parameter still points to service.xml/my/parameter, even if mod_rewrite is disabled.
For now, I have just taken the query string out of the url, and parsed it manually inside the PHP file. But I know that is not the right way to do this.
This seems to be the MultiViews option enabled.
Try to add Options -MultiViews in the <Directory> section (or .htaccess).