Ресурс был заблокирован из-за несоответствия типов MIME с использованием pug и узла - PullRequest
0 голосов
/ 08 марта 2020

Я пытаюсь отобразить представление с идентификатором в URL:

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

/ employee работает нормально, но когда я попадаю на страницу / employee /: id, css и скрипты не загружаются, и консоль показывает мне эту ошибку:

Ресурс из «http://127.0.0.1: 3000 / employee / lib / bootstrap / css / bootstrapmin. css ”Был заблокирован из-за несоответствия типа MIME (« application / json ») (X-Content-Type-Options: nosniff).

это мой заголовок index.pug:

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
    });
});

и 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

1 Ответ

2 голосов
/ 08 марта 2020

Это потому, что вы используете относительные URL в своих атрибутах.

Замените это:

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

этим:

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

Чтобы объяснить это дальше, при просмотре /employee относительная ссылка на img/123.jpg правильно разрешается как /img/123.jpg. Однако, как только вы наберете go на URL /employee/joeblow, соответствующая ссылка будет искать /employee/img/123.jpg. Вы сможете подтвердить это, открыв Developer Tools в своем браузере, а затем просмотрев запросы, сделанные на вкладке Network.

Добавление sla sh в начале всех элементов img гарантирует, что они ищут изображения в правильной папке, которая находится в root (/).

Ошибка типа mime-типа bootstrap должна исходить из одной из библиотек, которая загружается правильно, но не находит зависимости из-за проблемы, описанной выше.

...