Node JS 和 AngularJS - 找不到脚本和链接 - 404答案

【问题标题】：Node JS and AngularJS - script and links not found - 404Node JS 和 AngularJS - 找不到脚本和链接 - 404
【发布时间】：2017-08-10 12:58:44
【问题描述】：

我正在尝试使用 Openshift 2 构建 Node.js/AngularJS 应用程序。服务器正在成功运行，如果我转到本地地址，我会得到 index.html（但空白，因为它不加载 css），我无法在 index.html 上获取脚本和链接，我收到错误 404 但我不知道为什么。

文件夹结构：

sw [sw master]
    pages
         index.html
         inicio.html
    css
         inicio.css
    js
         angular.js 
         aplicacion.js                                      
    app.js
    start.js

app.js

const http         = require('http'),
      fs           = require('fs'),
      path         = require('path'),
      contentTypes = require('./utils/content-types'),
      sysInfo      = require('./utils/sys-info'),
      env          = process.env;

let server = http.createServer(function (req, res) {
  let url = req.url;
  if (url == '/') {
    url += '/index.html';
  }

  // IMPORTANT: Your application HAS to respond to GET /health with status 200
  //            for OpenShift health monitoring

  if (url == '/health') {
    res.writeHead(200);
    res.end();
  } else if (url == '/info/gen' || url == '/info/poll') {
    res.setHeader('Content-Type', 'application/json');
    res.setHeader('Cache-Control', 'no-cache, no-store');
    res.end(JSON.stringify(sysInfo[url.slice(6)]()));
  } else {
    fs.readFile('./pages' + url, function (err, data) {
      if (err) {
        res.writeHead(404);
        res.end('Not found');
      } else {
        let ext = path.extname(url).slice(1);
        if (contentTypes[ext]) {
          res.setHeader('Content-Type', contentTypes[ext]);
        }
        if (ext === 'html') {
          res.setHeader('Cache-Control', 'no-cache, no-store');
        }
        res.end(data);
      }
    });
  }
});

server.listen(env.NODE_PORT || 3000, env.NODE_IP || 'localhost', function () {
  console.log(`Application worker ${process.pid} started...`);
});

index.html

<!DOCTYPE html>
<html lang="es" data-ng-app="TFG">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Página principal</title>

        <script src="../js/angular.js"></script>
        <script src="../js/app.js"></script>    
        <link href="../css/inicio.css" rel="stylesheet" />

    </head>

    <body>  

        <!--CUERPO-->
        <div data-ng-view></div>

    </body>
</html>

【问题讨论】：

如何在 localhost 上运行服务器？你提到了哪个本地地址？
我在 127.0.0.1:3000 上运行类似 node.js 的应用程序

标签： javascript html angularjs node.js openshift

【解决方案1】：

当您在 nodejs 文件中提供路径时，您的索引文件应该位于根级别。现在您的 index.html 位于“pages”文件夹下。页面索引.html inicio.html

我想这会是你的树

sw [sw 大师] 页面 inicio.html css inicio.css js 角.js 应用程序.js 强调文本index.html
应用程序.js start.js

【讨论】：

我是这么想的，但这是我在创建应用程序时 Openshift 给我的：github.com/icflorescu/openshift-cartridge-nodejs/tree/master/…
必须遵循他们还提供描述的那些 github 链接。
否则你必须从服务器发送css、js的路径。

【解决方案2】：

运行服务器的 Node.js 脚本将从页面文件夹呈现 html。此 index.html 具有通过文件夹结构中的相对路径链接的 css 和 js，但您也需要公开公开它以在浏览器尝试获取资源时访问它。您将需要一些代码来提供该静态内容。

实际上，是您自己的代码返回 404 作为浏览器试图从您的页面文件夹中获取资源（css 和 js）但未找到的 URL。

 fs.readFile('./pages' + url, function (err, data) {
      if (err) {
        res.writeHead(404);
        res.end('Not found');
      }

您应该包含一些返回 css 和 js 文件的代码。

【讨论】：