通过 A2 托管上传的 Node.js Web 应用程序 - CSS 的路径问题答案

【问题标题】：Node.js web app uploaded through A2 Hosting - pathing issue with CSS通过 A2 托管上传的 Node.js Web 应用程序 - CSS 的路径问题
【发布时间】：2020-12-30 19:44:18
【问题描述】：

我目前正在学习 node.js，而且还很新，所以我提前为第一个问题可能效率低下或格式错误表示歉意。我正在上传一页测试，以了解如何使用 A2 的 node.js 服务。

到目前为止，我已经按照 A2 教程“如何使用 Node.js 选择器创建带有 cPanel 的 Node.js 应用程序”（https://www.a2hosting.com/kb/cpanel/cpanel-software/create-application-with-nodejs-selector）和本教程同步 git 存储库（https://medium.com/@pampas93/host-your-node-js-app-on-shared-hosting-go-beyond-localhost-73ab923e6691），我已经能够让除主页外的所有内容都正常工作

（位于目录名/repositories/test/views/home-visitor.ejs）

不会读取我上传的 CSS 文件

（位于：目录名/repositories/test/public/main.css）

有些图片无法加载。没有文件名拼写错误或正斜杠“/”语法不一致，所有图像共享相同的文件夹路径。

（位于：目录名/repositories/test/public/images）

因此 node.js 应用程序仅显示为纯 HTML。我已将完全相同的 app/git 存储库上传到 Heroku，并且读取了 CSS 并显示了所有图像，因此我试图弄清楚我在专门上传到 A2 的托管服务时遇到了哪些路径问题。

当我在浏览器上检查非工作应用页面的“检查”时，我收到以下控制台消息：

“拒绝应用来自 'http://domainname.com/main.css' 的样式，因为它的 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查。”

加载资源失败：服务器响应状态为 404 () nonWorkingImageExample.png:1

加载资源失败：服务器响应状态为 404 () anotherNonWorkingImageExample.png:1

http://domainname.com/test/main.css 发送到 404 页面

app.js：

const express = require("express")
const app = express()

let port = process.env.PORT
if (port == null || port == "") {
  port = 3000
}

app.use(express.static("/public/"))
app.set("views", "views")
app.set("view engine", "ejs")

app.get("/test", function (req, res) {
  res.render("home-visitor")
})

app.listen(3000)

我正在测试的页面：home-visitor.ejs:

<!DOCTYPE html>
    <html><head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,initial-scale=1">
            
        <link rel="stylesheet" href="main.css" type="text/css">
    </head>
    <header>          
        <div class="forMobile mobileHeader">
            <div class="mobileLogo">
                <a href="#"><img src="images/workingImageExample.png" alt="Image Description"> 
                </a>
            </div>
        </div>  
    </header>
            
   <div class="forDesktop centerContent tempMssg">"Lorem flexitarian salvia offal umami. Sartorial swag drinking portland cray. Godard jianbing retro thundercats hella tilde. "
            
        <br><br> 
        <a href="#" target="_blank" rel="noopener noreferrer">
            <img src="images/nonWorkingImageExample.png" alt="Twitter Logo Link" width="35px" height="35">
        </a>
    </div>                  
    <div class="forMobile mobileUpperBG">
        <img src="images/anotherNonWorkingImageExample.png" alt="upper left bg image">
    </div>
</html>

我希望熟悉在 A2 上托管 node.js 应用程序的人可以提供帮助，并感谢您抽出时间阅读这个问题。

【问题讨论】：

标签： node.js express web-applications ejs web-hosting

【解决方案1】：

此解决方案的全部功劳归于 VictoryFlame 的视频 https://www.youtube.com/watch?v=BAD5JyOymRg.

我最终编辑了 app.js 路径我的公共文件夹的方式，并更新了我在 .ejs 文件中链接 CSS 和图像文件的方式：

app.js：

const express = require("express")
const app = express()
const path = require("path")

app.set("views", path.join(__dirname, "views"))
app.set("view engine", "ejs")

app.use("/test1/static", express.static("public/"))

app.get("/test1", function (req, res) {
  res.render("home-visitor")
})

app.listen()

我重新格式化了指向 CSS 页面的样式链接，并对图像使用了这种路径语法：

home-visitor.ejs:

<link rel="stylesheet" href="https://domainname.com/test1/static/home.css">

<a href="#" target="_blank" rel="noopener noreferrer">
<img src="/test1/static/images/imageWorksNow.png" alt="Twitter Logo Link" width="35px" height="35"></a>

现在所有内容都已正确提供/链接并显示。我希望有一天这对其他人有所帮助！

【讨论】：