Question

我正在尝试使用登录模板（取自：50 Free HTML5 And CSS3 Login Forms For Your Website 201

我的目录设置如下：

-css
 |
 -- style.css
- js
 |
 -- index.js
 |
index.html

index.html文件的头部显示：

<head>
  <meta charset="UTF-8">
  <title>Sign-Up/Login Form</title>
  <link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,300,600' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">


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


</head>

并且正文包含了包含的脚本：

 <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script src="js/index.js"></script>

我的node.js看起来：

// Import Required Module
var express = require('express')
var app = express()
var bodyParser = require('body-parser')


// css
var path = require('path')
app.use(express.static(path.join(__dirname, 'public')));

// Create instances
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({    
  extended: true
})); 

// Get
app.get('/', function (req, res) {
  console.log('Get: /');
  res.sendFile('LoginTemplate/index.html', {root: __dirname })
})

/*
app.get('css/style.css', function (req, res) {
    console.log('Get: css/style.css');
    res.sendFile('css/style.css', {root: __dirname })
})
*/


// Listner
app.listen(3001, function () {
  console.log('Example app listening on port 3001!')
})

加载html文件时出现错误：

GET http://127.0.0.1:3001/css/style.css

我试图寻找解决方案： Can not get CSS file

并创建了公用文件夹并将css文件夹复制到其中，但它仍然无效。

如何加载css＆amp; js文件？

Answer 1

// Import Required Module
var express = require('express')
var app = express()
var bodyParser = require('body-parser')

// Create instances
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({    
  extended: true
})); 

// Get
app.get('/', function (req, res) {
  console.log('Get: /');
  res.sendFile('LoginTemplate/index.html', {root: __dirname })
})


app.get('/css/style.css', function (req, res) {
    console.log('Get: css/style.css'); 
    res.sendFile('LoginTemplate/css/style.css', {root: __dirname })
})

app.get('/js/index.js', function (req, res) {
    console.log('Get: js/index.js'); 
    res.sendFile('LoginTemplate/js/index.js', {root: __dirname })
})


// Listner
app.listen(3001, function () {
  console.log('Example app listening on port 3001!')
})

Answer 2

在您的代码和文件夹设置中，一切都很好看。从您发布的URL（http://127.0.0.1:3001/css/style.css），我猜测错误在于您的服务器实例。检查定义文件并确保服务器有权读取css / style.css。

当文件和文件夹没有正确的权限时，我遇到了这个问题。快速检查一下是运行类似于sudo chmod -R 0777 [path_to_your_project]的东西（Linux和Mac系统将使用此命令）。此命令为所有用户和访客提供对读取，写入和执行文件的完全访问权限，是验证问题是否为用户权限的快速方法。

当我的Web服务器配置不正确时，我也遇到了同样的问题。在那些情况下，我不小心允许Web服务器共享根文件夹中的所有文件（例如：/ var / www），但不是任何子文件夹，因此（使用示例）文件夹/ var / www / images将是由Web服务器解析并被视为受保护的区域。在这种情况下，Web Server具有访问权限，但它拒绝根据配置规则提供文件。

我希望这两项修复中的一项能够帮助您找到解决方案的正确途径。

祝你好运！

无法加载css文件

2 个答案: