代码之家 › 专栏 › 技术社区 › NeitoFR

Node Express服务器:如何正确地提供HTML文件(包括脚本和css)?(csp、相对路径等)

content-security-policy twitter-bootstrap node.js javascript

NeitoFR · 技术社区 · 7 年前

(我知道这个问题已经以多种形式被问过很多次了,但我尝试了很多解决方案,但都没有达到应有的效果……因此,也许一个适合我工作的解决方案可以帮助我理解。)

这是索引。html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./../node_modules/bootstrap/dist/css/bootstrap.min.css">

    <title>Document</title>
</head>
<body>
    <nav class="navbar navbar-default ">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Brand</a>
            </div>
        </div>
    </nav>

    <script src="../node_modules//bootstrap.min.js"></script>
    <script src="./../node_modules/jquery/dist/jquery.js"></script>
</body>
</html>

这是服务器/应用程序。js。我让res.sendFile();故意清空。

//export used
var express = require('express'),
    url = require("url"),  
    path = require("path"),  
    fs = require("fs");

const _port = 3000
var app = express();

app.get('/', function(req, res){
    res.sendFile();
});

app.listen(_port, function() { console.log('listening port '+_port+"\n__dirname : "+__dirname)});

目前服务器的目的只是发送索引。html,这是公用文件夹中的一个级别。当向“/”发出请求时。我不能做IITT, 有几个原因:
-我尝试使用头盔来解决内容安全策略问题。
-我尝试使用静态中间件来做一些事情。。
-我试着用这条路。加入/解决

那么,有没有人能解释一下如何发送这个公共/索引。html文件和引导脚本/css一起工作?

祝你今天愉快

编辑:

这是新的应用程序。js,它呈现索引。html感谢express。静态但不会呈现引导css/脚本:

//export used
var express = require('express'),
    url = require("url"),  
    path = require("path"),  
    fs = require("fs");

const _port = 3000
var app = express();



app.use(express.static(path.join(__dirname, '/..', 'public')));

app.get('/', function(req, res){
    res.sendFile('../public/index.html',{root: __dirname});
});
app.listen(_port, function() { console.log('listening port '+_port+"\n__dirname : "+__dirname)});

2 回复 | 直到 7 年前

Firas Omrane 7 年前

您必须在定义应用程序之后和其他路由之前添加静态中间件,因为 建议将静态中间件放在首位 .

使用路径模块连接路径 因为它有助于避免问题操作系统使用斜杠和反斜杠的方式不同。

app.use( '/' , express.static(path.join(__dirname ,'..' ,'public'));

通过这样做,您可以为公共目录中的所有静态文件提供服务,包括脚本和css。

ravi 7 年前

如果您使用的是express,那么您不应该提供单个文件,相反,您可以在所有js和css所在的位置创建一个静态文件夹,您可以提供整个文件夹,并使用angular进行路由。

以下是示例代码:

var express = require('express'),
    url = require("url"),  
    path = require("path"),  
    fs = require("fs");

const _port = 3000
var app = express();

app.use('/',express.static(__dirname+'public'));
app.use(bodyParser.json());

app.listen(_port, function() { console.log('listening port '+_port+"\n__dirname : "+__dirname)});