Node Express 服务器：如何正确提供 HTML 文件（包括脚本和 css）？（csp，相对路径和类似的东西）

Question

（我知道这个问题已经以多种形式被问过很多次，但我尝试了很多解决方案并且 none 以它应该的方式工作..所以也许适合我工作的解决方案会对我有所帮助明白了。）

这里是 structure of my project.

这里是 index.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>

这里是 server/app.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)});

服务器目前的目的只是发送 index.html，即 public 文件夹中的上一层。当向“/”发出请求时。我不能做 IIIITT，出于几个原因：
-我尝试使用头盔来解决内容安全策略。
-我尝试使用静态中间件来做一些事情..
-我尝试使用 path.join / resolve

那么有没有人能以某种方式解释如何在 bootstrap scripts/css 工作的情况下发送此 public/index.html 文件？

祝你有愉快的一天

编辑：

这是新的 app.js，它呈现 index.html 感谢 express.static 但 bootstrap css/scripts 未呈现：

//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)});

Answer 1

您必须在定义您的应用程序之后和其他路由之前添加静态中间件，因为建议首先放置静态中间件。

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

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

通过这样做，您可以提供 public 目录中的所有静态文件，包括脚本和 css。

Answer 2

如果您使用的是 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)});

Node Express 服务器：如何正确提供 HTML 文件（包括脚本和 css）？（csp，相对路径和类似的东西）

Node Express Server : How to serve HTML file properly (scripts and css included) ? (csp, relative path and thing like that)

javascript

node.js

twitter-bootstrap

content-security-policy

Node Express 服务器：如何正确提供 HTML 文件（包括脚本和 css）？ （csp，相对路径和类似的东西）

Node Express Server : How to serve HTML file properly (scripts and css included) ? (csp, relative path and thing like that)

javascript

node.js

twitter-bootstrap

content-security-policy

Node Express 服务器：如何正确提供 HTML 文件（包括脚本和 css）？（csp，相对路径和类似的东西）