Question

我很困惑为什么我的最新网络应用程序无法获取我包含的任何css或js文件。在我的本地机器上，文件很好但是当我在我的nginix前端服务器上托管它时，我得到的是404。这是我的html包含。

<!-- ANGULAR -->
<script src="/bower_components/angular/angular.js"></script>

<!-- ANGULAR BOOTSTRAP UI -->
<script src="/bower_components/angular-bootstrap/ui-bootstrap.js"></script>

<!-- ANGULAR ROUTE-->
<script src="/bower_components/angular-route/angular-route.js"></script>

<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="./bower_components/bootstrap-css-only/css/bootstrap.css">

<!-- ANGULAR APP SETUP -->
<script src="/js/app.js"></script>
<script src="/js/controllers.js"></script>

<!-- Custom styles -->
<link rel="stylesheet" type="text/css" href="/css/styles.css">

这是节点快速服务器代码

// set up ========================
var express  = require('express');
var app      = express();                        // create our app w/ express
var morgan = require('morgan');                  // log requests to the console (express4)
var bodyParser = require('body-parser');         // pull information from HTML POST (express4)
var methodOverride = require('method-override'); // simulate DELETE and PUT (express4)
var path = require('path');

// configuration =================

// set the static files location /public/img will be /img for users
app.use(express.static(path.join(__dirname, '/public')));
console.log("DIRECTORY= "+path.join(__dirname, '/public'));

app.use(morgan('dev'));                                         // log every request to the console
app.use(bodyParser.urlencoded({'extended':'true'}));            // parse application/x-www-form-urlencoded
app.use(bodyParser.json());                                     // parse application/json

// application -------------------------------------------------------------
app.get('/', function(req, res) {
    res.sendFile(path.join(__dirname, '/public/index.html')); // load the single view file (angular will handle the page changes on the front-end)
});

app.get('/DI_Uploader/', function(req, res) {
    res.sendFile(path.join(__dirname, '/public/index.html')); // load the single view file (angular will handle the page changes on the front-end)
});

//decides between what heroku would give it or our own chosen port for a locally hosted solution
app.set('port', (process.env.PORT || 8002));

app.listen(app.get('port'), function() {
  console.log('Node app is running on port', app.get('port'));
});

我在公共目录下拥有所有js / css / bower_components。我能想到的另一件事就是nginx，我有这个......

location /DI_Uploader/ {

    proxy_ignore_client_abort on;
    proxy_pass http://webserverName:8002;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
}

托管版本与我的本地版本唯一不同的是，要访问托管版本，我将转到http://website.com/DI_Uploader/而不是root.com。任何方向都是有帮助的，因为我对express仍然相当新。

编辑：在html包括

之前删除了句号

不知道如何将其添加到评论中，但这是Web服务器上的文件夹结构。

- DI_Uploader
    - node_modules
    - public
        - bower_components
        - css
        - js
        index.html
    server.js
    package.json

Answer 1

感谢@ jfriend00，我能够看到我无法加载静态内容的原因是因为我在我的嵌套/ DI_Uploader上真正需要静态内容的时候设置了静态内容/文件夹。要解决此问题，您可以使用虚拟路径来欺骗它。

请参阅http://expressjs.com/en/starter/static-files.html。

代码已更改为

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

Express js提供的静态文件不能与nginx

1 个答案: