资源由于使用pug和node的MIME类型不匹配而被阻止 [英] Resource was blocked due to MIME type mismatch using pug and node
问题描述
我正在尝试使用url中的id渲染视图:
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);
/employee工作正常，但是当我进入/employee/:id页面时，css和脚本将不会加载，并且控制台会向我显示此错误:
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:
来自的资源" http://127.0.0.1:3000/employee/lib/bootstrap/css/bootstrapmin.css "由于MIME类型("application/json")不匹配而被阻止(X内容类型选项:nosniff).
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).
这是我的index.pug标头:
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
});
});
和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
推荐答案
这是因为您在属性中使用了相对URL.
This is because you are using relative url's in your attributes.
替换此:
link(href='img/favicon.png' rel='icon')
与此:
link(href='/img/favicon.png' rel='icon')
为进一步解释这一点，当您查看/employee 时，位于 img/123.jpg 的相对链接被正确解析为/img/123.jpg .但是，一旦您转到URL /employee/joeblow ，则相对链接就会查找/employee/img/123.jpg .通过在浏览器中打开开发人员工具"，然后查看网络"标签中的请求，您可以确认这一点.
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.
在所有 img 元素的前面添加斜杠将确保它们在正确的文件夹(根目录(/))中查找图像.
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 (/).
bootstrap mime-type错误必须来自可以正确加载但由于上述问题而没有找到依赖项的库之一.
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.
这篇关于资源由于使用pug和node的MIME类型不匹配而被阻止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
