Rewrite only requests for html files

[IgorMinar]

When SystemJS is misconfigured and it tries to fetch modules via URLs that don't map to js files, lite-server redirects the requests to index.html (or /) in order to support the window.history.pushState location strategy.

The problem with this is that System will typically error with a weird error like Uncaught SyntaxError: Unexpected token <. This error is very difficult to understand and fix.

It would be much better if lite-server error with 404s in this case, giving the developer the correct feedback that the file is not present at this url. This should be achieved without breaking the pushState support for location by distinguishing the SystemJS requests from the application requests. SystemJS makes all requests with Accept: application/x-es-module, */* request header and we can use this to identify these requests and treat them differently from others.

This kind of treatment of different requests might be useful for other kinds of errors in general (e.g. image fetches). So it might actually be better to change the server to rewrite only requests with request header Accept:text/html,application/xhtml+xml,... which is typically used by the browser to fetch the initial html (which is the only thing we want to rewrite).

[johnpapa]

interesting idea. i've seen this too when systemjs has this issue. perhaps we can ask the server to scan the headers with some custom middleware.

@cgmartin you wrote some middleware in the past for browsersync, would you want to take a stab at this? Basically, scanning the headers and when we see this specific one from systemjs, spit out the 404.

[IgorMinar]

@johnpapa can we do it the other way around - rewrite the request only if the text/html header is found? I don't think that you want to rewrite any non-html request.

[johnpapa]

yep. agreed

[johnpapa]

something like this type of logic as a starting point, just for reference

var http = require('http');

http.createServer(function(req, res) {
    console.log(req.headers.accept);
    var msg = '';
    var accept = req.headers.accept;
    var match = 'text/html,application/xhtml+xml';
    if (accept.substring(match)) {
        msg = 'html request';
    } else {
        msg = 'something else';
    }
    res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' })
    res.write(msg);
    res.end();
}).listen(8001);

[IgorMinar]

Split the regexp in two and look for either html or xhtml.

Various browsers will use slightly different header signature or or order
of mine types.

Otherwise lgtm

On Tue, Mar 15, 2016 at 8:36 AM John Papa notifications@github.com wrote:

something like this type of logic as a starting point

var http = require('http');

http.createServer(function(req, res) {
console.log(req.headers.accept);
var msg = '';
var accept = req.headers.accept;
var match = 'text/html,application/xhtml+xml';
if (accept.substring(match)) {
msg = 'html request';
} else {
msg = 'something else';
}
res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' })
res.write(msg);
res.end();
}).listen(8001);

—
You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub:

#51 (comment)

[cgmartin]

I can take a stab at this.

[cgmartin]

So close, yet so far away...
https://github.com/bripkens/connect-history-api-fallback/blob/master/lib/index.js#L90

function acceptsHtml(header) {
  return header.indexOf('text/html') !== -1 || header.indexOf('*/*') !== -1;
}

Based on @IgorMinar's screencap, the rxjs request includes */* in its Accept header, which trips the above function in the history api fallback middleware to allow the redirect.

Accept: application/x-es-module, */*

Here is a PR/branch to test with: #53

[johnpapa]

closed with v 2.2.0