草庐IT

node.js - Node/Express - 拒绝应用样式，因为它的 MIME 类型为 ('text/html')

coder 2023-05-29 原文

过去几天我一直遇到这个问题，但似乎无法解决这个问题。我们正在做一个非常基本的 Node/ express 应用程序，并尝试使用以下方式提供我们的静态文件:

app.use(express.static(path.join(__dirname, "static")));

这在很大程度上符合我的预期。我们的静态文件夹中有几个文件夹用于我们的 css 和 javascript。我们正在尝试使用这个静态路径将我们的 css 加载到我们的 EJS View 中:

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

当我们点击我们的路线 / 时，我们得到了所有的内容，但我们的 CSS 没有加载。我们特别收到了这个错误:

Refused to apply style from 'http://localhost:3000/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

我尝试过的:

  1. 清除 NPM 缓存/全新安装
    • npm 验证缓存
    • rm -rf node_modules
    • npm install
  2. 清除浏览器缓存
  3. 对文件夹名称和对文件夹名称的各种修改
  4. 在 href 中添加/删除正斜杠
  5. 将 css 文件夹移动到根目录并从那里提供服务
  6. 在 path.join(__dirname, '/static/') 中添加/删除斜杠
  7. 在一份 github 问题报告中，有一条关于服务人员可能会搞砸事情的评论，并且似乎解决了很多人的问题。我们的本地主机没有服务 worker :https://github.com/facebook/create-react-app/issues/658
    • 我们没有使用 react，但我可以找到任何谷歌搜索

路线:

app.get("/", function(req, res) {
    res.render("search");
});

View :

<!DOCTYPE html>
<html>
    <head>
        <title>Search for a Movie</title>
        <link rel="stylesheet" type="text/css" href="/static/css/style.css">
    </head>
    <body>
        <h1>Search for a movie</h1>
        <form method="POST" action="/results">
            <label for="movie-title">Enter a movie title:</label><br>
            <input id="movie-title" type="text" name="title"><br>
            <input type="submit" value="Submit Search">
        </form>
    </body>
</html>

package.json:

{
  "name": "express-apis-omdb",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "nodemon index.js",
    "lint:js": "node_modules/eslint/bin/eslint.js ./ ./**/*.js --fix; exit 0",
    "lint:css": "node_modules/csslint/cli.js public/css/; exit 0"
  },
  "license": "ISC",
  "devDependencies": {
    "babel-eslint": "^6.0.4",
    "csslint": "^0.10.0",
    "eslint": "^2.11.1",
    "eslint-config-airbnb": "^9.0.1",
    "eslint-plugin-import": "^1.8.1",
    "eslint-plugin-jsx-a11y": "^1.3.0",
    "eslint-plugin-react": "^5.1.1"
  },
  "dependencies": {
    "body-parser": "^1.18.2",
    "dotenv": "^5.0.0",
    "ejs": "^2.5.7",
    "express": "^4.13.4",
    "morgan": "^1.7.0",
    "path": "^0.12.7",
    "request": "^2.83.0"
  }
}

项目结构:

-app
--node_modules
--static
---img
---css
---js
--views
---movie.ejs
---results.ejs
---search.ejs
--index.js
--package-lock.json
--package.json

注意:我们目前没有为我们的 EJS 使用布局文件。

如果需要，我很乐意提供更多详细信息。

最佳答案

问题是文件命名不正确的结果。我们的学生在 style.css 文件的末尾有一个空格。对此有一些提示，第一个是文本编辑器中缺少语法突出显示，第二个是文本编辑器检测其他新创建的 css 文件的文件类型，但没有检测到不正确命名的文件。删除空格解决了这个问题。

感谢 slebetman 帮助我指明了正确的方向。

关于node.js - Node/Express - 拒绝应用样式，因为它的 MIME 类型为 ('text/html')，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48778619/

ampExpress34codecssnode.jsmime-typesstatic-files

有关node.js - Node/Express - 拒绝应用样式，因为它的 MIME 类型为 ('text/html')的更多相关文章

  1. ruby-on-rails - rails : "missing partial" when calling 'render' in RSpec test - 2

    我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身，new.html.erb，有代码:当我运行rspec时，它失败了:1)messages/new.html.erbshou

  2. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

  3. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  4. ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2

    我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer

  5. ruby - 在 jRuby 中使用 'fork' 生成进程的替代方案？ - 2

    在MRIRuby中我可以这样做:deftransferinternal_server=self.init_serverpid=forkdointernal_server.runend#Maketheserverprocessrunindependently.Process.detach(pid)internal_client=self.init_client#Dootherstuffwithconnectingtointernal_server...internal_client.post('somedata')ensure#KillserverProcess.kill('KILL',

  6. ruby - 主要 :Object when running build from sublime 的未定义方法 `require_relative' - 2

    我已经从我的命令行中获得了一切，所以我可以运行rubymyfile并且它可以正常工作。但是当我尝试从sublime中运行它时，我得到了undefinedmethod`require_relative'formain:Object有人知道我的sublime设置中缺少什么吗？我正在使用OSX并安装了rvm。 最佳答案 或者，您可以只使用“require”，它应该可以正常工作。我认为“require_relative”仅适用于ruby​​1.9+ 关于ruby-主要:Objectwhenrun

  7. ruby - 无法让 RSpec 工作—— 'require' : cannot load such file - 2

    我花了三天的时间用头撞墙，试图弄清楚为什么简单的“rake”不能通过我的规范文件。如果您遇到这种情况:任何文件夹路径中都不要有空格!。严重地。事实上，从现在开始，您命名的任何内容都没有空格。这是我的控制台输出:(在/Users/*****/Desktop/LearningRuby/learn_ruby)$rake/Users/*******/Desktop/LearningRuby/learn_ruby/00_hello/hello_spec.rb:116:in`require':cannotloadsuchfile--hello(LoadError) 最佳

  8. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  9. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  10. ruby-on-rails - 新 Rails 项目 : 'bundle install' can't install rails in gemfile - 2

    我已经像这样安装了一个新的Rails项目:$railsnewsite它执行并到达:bundleinstall但是当它似乎尝试安装依赖项时我得到了这个错误Gem::Ext::BuildError:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcheckingforlibkern/OSAtomic.h...yescreatingMakefilemake"DESTDIR="cleanmake"DESTDIR="

随机推荐