phphtmlcssurl-routingaltorouter

AltoRouter send Mime Type

I'm using AltoRouter to route my urls to the correct files. Now basically here, I describe my problem already.

On one page, I have an alert included, styled by bootstrap.

It's defined as simple as that:

$('#wrongPasswordDiv').html('<br/><div class="alert alert-danger" id="wrongPWAlert" role="alert">Falsches Passwort. Bitte erneut versuchen!</div>');

Also, before, Bootstrap css file is included:

<link rel="stylesheet" type="text/css" href="/bootstrapcss" />

bootstrapcss is routed to the correct css file using AltoRouter and this line of code:

$router->map('GET','/bootstrapcss','vendor/twbs/bootstrap/dist/css/bootstrap.css','bootstrapcss');

Now, in console, it throws a warning saying Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost/bootstrapcss".

If I use the complete path to the css file, a CDN or remove the DOCTYPE, its working fine. But I don't wanna do either of those variations... Removing the doctype, might damage other functions and if I would use the complete css path, then I wouldn't need the routing...

Any ideas how I could send the Content-type: text/css header, in order to get it working?

Solution

  • You should send the proper Content-Type before you send the response content. I don't know much PHP so I may not read the CSS in the best way, but this is a working example:

    Using this route:

    $router->map('GET','/bootstrapcss','example.css','bootstrapcss');

    And then while matching:

    $match = $router->match();

if($match['name'] === 'bootstrapcss'){
    header("Content-Type: text/css");
    $fileName = $match['target'];
    echo file_get_contents($fileName);
    return;
}

    For context, I have a full example here: https://gist.github.com/kobi/09eaeeecb3406b193a84a674218798a9
    This is based on the basic example on AltoRouter: https://github.com/dannyvankooten/AltoRouter/tree/master/examples/basic