node.js - Resource was blocked due to MIME type mismatch using pug and node

Question

I'm trying to render a view with an id in the url:

router.get('/employee', authController.protect, viewsController.getOverviewEmployee);
router.get('/employee/:id', authController.protect, viewsController.getOneEmployee);

The /employee works fine, but when I get to the /employee/:id page the css and scripts won't load and the console shows me this error:

The resource from “http://127.0.0.1:3000/employee/lib/bootstrap/css/bootstrapmin.css” was blocked due to MIME type (“application/json”) mismatch (X-Content-Type-Options: nosniff).

this is my index.pug header:

doctype html
head
  meta(charset='utf-8')
  meta(name='viewport' content='width=device-width, initial-scale=1.0')
  meta(name='description' content='')
  meta(name='author' content='Dashboard')
  meta(name='keyword' content='Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina')
  title Admin
  // Favicons
  link(href='img/favicon.png' rel='icon')
  link(href='img/apple-touch-icon.png' rel='apple-touch-icon')
  // Bootstrap core CSS
  link(href='lib/bootstrap/css/bootstrap.min.css' rel='stylesheet')
  link(rel='stylesheet', type='text/css', href='lib/bootstrap-fileupload/bootstrap-fileupload.css')
  // external css
  link(href='lib/font-awesome/css/font-awesome.css' rel='stylesheet')
  // Custom styles for this template
  link(href='dashcss/style.css' rel='stylesheet')
  link(href='dashcss/style-responsive.css' rel='stylesheet')

getOneEmployee:

exports.getOneEmployee = catchAsync(async (req, res, next) => {
    const employee = await Employees.findById(req.params.id);

    if (!employee) {
      return next(new AppError('No document found with that ID', 404));
    }

    res.status(200).render('admin/employeeManager',{
      title: 'Employee',
      employee
    });
});

and the employeeManager.pug

extends index

block content
    section#container
        MAIN CONTENT
        // main content start
        section#main-content
            section.wrapper
                h3
                    i.fa.fa-angle-right
                    |  Editar Colaborador
                    .row.mt
                        .col-lg-12
                            h4
                                .form-panel
                                    .form
                                        form.cmxform.form-horizontal.style-form#commentForm(method='get' action)
                                            .form-group
                                                label.control-label.col-lg-2(for='cname') Nome*
                                                .col-lg-10
                                                    input.form-control#cname(name='name' minlength='2' type='text' required)
                                            .form-group
                                                label.control-label.col-lg-2(for='cphone') Telefone*
                                                .col-lg-10
                                                    input.form-control#cemail(type='cphone' name='phone' required)
                                            .form-group
                                                label.control-label.col-lg-2(for='cdescription') Descri??o*
                                                .col-lg-10
                                                    input.form-control#curl(type='description' name='description' required)
                                            .form-group
                                                label.control-label.col-lg-2(for='ccomment') Your Comment (required)
                                                .col-lg-10
                                                    textarea.form-control#ccomment(name='comment' required)
                                            .form-group
                                                label.control-label.col-md-3 Image Upload
                                                .col-md-9
                                                    .fileupload.fileupload-new(data-provides='fileupload')
                                                        .fileupload-new.thumbnail(style='width: 200px; height: 150px;')
                                                            img(src='http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image', alt='')
                                                        .fileupload-preview.fileupload-exists.thumbnail(style='max-width: 200px; max-height: 150px; line-height: 20px;')
                                                        div
                                                            span.btn.btn-theme02.btn-file
                                                                span.fileupload-new
                                                                    i.fa.fa-paperclip
                                                                    |  Select image
                                                                span.fileupload-exists
                                                                    i.fa.fa-undo
                                                                    |  Change
                                                                input.default(type='file')
                                                            a.btn.btn-theme04.fileupload-exists(href='', data-dismiss='fileupload')
                                                                i.fa.fa-trash-o
                                                                |  Remove
                                                    span.label.label-info NOTE!
                                                    span
                                                        | Attached image thumbnail is
                                                        | supported in Latest Firefox, Chrome, Opera,
                                                        | Safari and Internet Explorer 10 only
                                            .form-group
                                                .col-lg-offset-2.col-lg-10
                                                    button.btn.btn-theme(type='submit') Salvar
                                                    | 
                                                    button.btn.btn-theme04(type='button') Cancelar

Answer 1

This is because you are using relative url's in your attributes.

Replace this:

link(href='img/favicon.png' rel='icon')

With this:

link(href='/img/favicon.png' rel='icon')

To explain this further, when you are viewing /employee then the relative link at img/123.jpg is correctly resolved as /img/123.jpg. However, as soon as you go to the url /employee/joeblow then the relative link is looking for /employee/img/123.jpg. You'll be able to confirm this by opening Developer Tools in your browser then looking at the requests made in the Network tab.

Adding the slash at the front of all img elements will ensure that they look for the images in the correct folder, the one off the root (/).

The bootstrap mime-type error must be coming from one of the libraries that is loading correctly but not finding a dependency due to the issue described above.