简体   繁体   English

加载资源失败:服务器以 404(未找到)状态响应 nodejs

[英]Failed to load resource: the server responded with a status of 404 (Not Found) with nodejs

I am trying to get the html elements data at nodejs server.我正在尝试在 nodejs 服务器上获取 html 元素数据。 But I keep getting lot of errors in the browser.但是我在浏览器中不断收到很多错误。 Here's is my html page.这是我的 html 页面。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>SimplyBPM | Customer 360 CRM | Dashboard</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.5 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="assets/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="assets/css/skins/_all-skins.min.css">

    <!-- SB css -->
    <link rel="stylesheet" href="assets/css/sbCustom.css">

  </head>
  <body class="hold-transition skin-blue sidebar-mini">
    <div class="wrapper">

    <!--  Header -->
    <div class="sbIncludeHTML" title="header.html">Include HTML here</div>

    <!--  Left Nav -->
    <div class="sbIncludeHTML" title="leftNav.html">Include HTML here</div>

      <!-- Content Wrapper. Contains page content -->
      <div class="content-wrapper">

        <!-- Content Header (Page header) -->
        <section class="content-header">
          <h1>Customer 360 CRM <small>Dashboard</small></h1>

        </section>

        <!-- Main content -->
        <section class="content">

          <!-- Small boxes (Stat box) -->
          <div class="row">
            <div class="col-lg-3 col-xs-6">  <!-- Box1 -->
              <!-- small box -->
              <div class="small-box bg-aqua">
                <div class="inner"><h3>9</h3><p>Unassigned</p></div>
                <div class="icon"><i class="ion ion-email-unread"></i></div>
                <a style="cursor:pointer;" class="small-box-footer" onclick="filterList('ALL',0)">Show all <i class="fa fa-arrow-circle-right"></i></a>
              </div>
            </div><!-- ./Box1 -->

            <div class="col-lg-3 col-xs-6"> <!-- Box2 -->
              <!-- small box -->
              <div class="small-box bg-green">
                <div class="inner"><h3>3</h3><p>My Incidents</p></div>
                <div class="icon"><i class="ion ion-ios-list"></i></div>
                <a style="cursor:pointer;" class="small-box-footer" onclick="filterList('MYRECORDS',0)">Show all <i class="fa fa-arrow-circle-right"></i></a>
              </div>
            </div><!-- ./Box2-->

            <div class="col-lg-3 col-xs-6"> <!-- Box3 -->
              <!-- small box -->
              <div class="small-box bg-yellow">
                <div class="inner"><h3>2</h3><p>New Incidents</p></div>
                <div class="icon"><i class="ion ion-ios-telephone"></i></div>
                <a style="cursor:pointer;" class="small-box-footer" onclick="filterList('NEW',0)">Show all <i class="fa fa-arrow-circle-right"></i></a>
              </div>
            </div><!-- ./Box3 -->

            <div class="col-lg-3 col-xs-6"> <!-- Box4 -->
              <!-- small box -->
              <div class="small-box bg-red">
                <div class="inner"><h3>4</h3><p>Follow-up Today</p></div>
                <div class="icon"><i class="ion ion-ios-bell"></i></div>
                <a style="cursor:pointer;" class="small-box-footer" onclick="filterList('FOLLOWUPTODAY',0)">Show all <i class="fa fa-arrow-circle-right"></i></a>
             </div>
            </div><!-- ./Box4 -->
          </div><!-- /.row -->

          <!-- Main row -->
          <div class="row">
            <!-- Left col -->
            <section class="col-lg-8 connectedSortable">

              <!-- Search Options -->
              <div class="box box-primary">
                <div class="box-header"><span class="glyphicon glyphicon-search"></span><h3 class="box-title">Search</h3></div>
                <div class="box-body">

              <div class="form-inline">
              <!-- Search ID box -->
              <div class="col-lg-7 col-md-7 col-sm-12 col-xs-12">
                <div class="form-group">
                    <label for="INCIDENT_ID">Incident Search ID:</label>
                    <input type="text" class="form-control sbDataFields" id="INCIDENT_ID" placeholder="Search ID">
                </div>
              </div>

               <!-- Search Button -->
              <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                 <div class="form-group">
                     <button type="button" name="search" id="search-btn1" class="btn btn-primary" onclick="searchRecord();">Search</button>&nbsp;&nbsp;
                     <button type="button" onclick="window.location='incidentSearch.html'" name="search" id="search-btn2" class="btn btn-primary" >Advanced</button>
                 </div>
              </div>         
             </div>


              </div> <!-- ./Box Body -->
              </div> <!-- End of Search Box ./box-primary -->

            <!-- Table of Incidents -->
              <div class="box box-primary">
                <!-- box-header -->
                <div class="box-header"><span class="glyphicon glyphicon-th-list"></span>
                <h3 class="box-title">Incident Table</h3>

                </div><!-- /.box-header -->
                <!-- Table values -->
                <div class="box-body table-responsive">
                  <table class="table table-hover" id="incidentList">
                    <thead>
                      <tr>
                        <th>Alert</th>
                        <th>Priority</th>
                        <th>Incident ID</th>
                        <th>Description</th>
                        <th>Type</th>
                        <th>Status</th>
                        <th>Created On</th>
                        <th>Assigned To</th>
                      </tr>
                    </thead>
                    <tbody>
                    </tbody>
                  </table>
                <div class="box-tools pull-right">
                    <ul class="pagination pagination-sm inline" id="pagination"> <!-- Scroll Buttons -->
                    </ul>
                </div>
                </div><!-- /.box-body -->
              </div><!-- /.box-primary -->                        
           </section><!-- /.Left col -->

           <!-- right col (We are only adding the ID to make the widgets sortable)-->
            <section class="col-lg-4 connectedSortable">
              <!-- Chat box -->
                <div class="sbIncludeHTML" title="notes.html">Include HTML here</div>

            </section><!-- right col -->
          </div><!-- /.row (main row) -->
       </section><!-- /.content -->
       </div><!-- /.content-wrapper -->

       <input type="text" value="" id="CURRENT_FILTER_TYPE" style="display:none"/>

       <!-- Main Footer -->
      <footer class="main-footer">
        <div class="pull-right hidden-xs">
          <b>Version</b> 2.3.0
        </div>
        <strong>Copyright &copy; 2015-2016 <a href="http://www.cgsits.com/simplybpm">CGS IT Solutions</a>.</strong> All rights reserved.
      </footer>  <!-- ./Main Footer -->  

    </div><!-- ./wrapper -->

        <div class="modal fade" id="pleaseWaitDialog" tabindex="-1" role="dialog" aria-labelledby="pleaseWaitDialogLabel">
  <div class="modal-dialog" role="document">
    <div class="row">
        <div class="col-sm-12">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="pleaseWaitDialogLabel">Processing...</h4>
      </div>
      <div class="modal-body">
            <div class="progress progress-striped active">
                <div class="progress-bar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
                    <span class="sr-only">70% Complete</span>
                </div>
            </div>
      </div>
    </div>
        </div>
    </div>
  </div>
</div>


    <!-- jQuery 2.1.4 -->
    <script src="assets/js/jQuery-2.1.4.min.js"></script>

    <!-- Bootstrap 3.3.5 -->
    <script src="bootstrap/js/bootstrap.min.js"></script>

    <!-- AdminLTE App -->
    <script src="assets/js/app.min.js"></script>

    <script src="files/common.js"></script>

    <script src="files/itsm.js"></script>

    <script src="files/sbIncludeHTML.js"></script>


<script>
        var totalRows = 0;
        var rowCount = 10;
        $(document).ready(function(){
            getAllRecords(0);
            getAllNotes();
            $(document).ajaxComplete(function(){
                    readOnlyNotes();
            });
        });

        function getAllRecords(rowOffset)
        {
            var dataString = "action=list&rowOffset=" + rowOffset  + "&rowCount=" + rowCount;
            $("#pleaseWaitDialog").modal("show");
            $.ajax({
                type:"GET",
                url:"/api/itsm/incident",
                data:dataString,
                success:function(response)
                {
                    $("#pleaseWaitDialog").modal("hide");
                    var returnMessage = checkResponse(response);
                    if(returnMessage == true)
                    {
                        generateTableHTML(response);
                        pagination(true,'LIST');
                    }
                    else if(returnMessage != false)
                    {
                        alert(returnMessage);
                    }
                }
            });
        }

        function generateTableHTML(response)
        {
            var responseJSON = JSON.parse(response);
            var responseJSONList;
            if(responseJSON.TOTAL_ROWS && responseJSON.TOTAL_ROWS != null && responseJSON.TOTAL_ROWS != undefined)
            {
                totalRows = responseJSON.TOTAL_ROWS;
            }
            responseJSONList = responseJSON.RESULTS_SET;
            var incidentTable = document.getElementById("incidentList");
            var html = "";
            for(var i=0;i<responseJSONList.length;i++)
            {
                html += "<tr>";
                if(i%2 == 0)
                {
                    html += "<td class='glyphicon glyphicon-bell text-red'></td>";
                }
                else
                {
                    html += "<td></td>";
                }
                html += "<td>" + responseJSONList[i].PRIORITY; + "</td>";
                html += "<td><a href='incidentDetails.html?IID=" + responseJSONList[i].INCIDENT_ID + "'>" + responseJSONList[i].INCIDENT_ID + "</a></td>";
                html += "<td>" + responseJSONList[i].SHORT_DESC + "</td>";
                html += "<td>" + responseJSONList[i].INCIDENT_TYPE + "</td>";
                html += "<td>" + responseJSONList[i].STATUS + "</td>";
                html += "<td>" + responseJSONList[i].CREATED_DATE + "</td>";
                html += "<td>" + responseJSONList[i].ASSIGNED_TO + "</td>";
                html += "</tr>";
            }
            incidentTable.getElementsByTagName("tbody")[0].innerHTML = html;
        }

        function filterList(type,rowOffset)
        {
            $("#pleaseWaitDialog").modal("show");
            var searchObject = new Object();
            var tempDate = new Date();
            if(type == "NEW")
            {
                searchObject["CREATED_DATE"] = yyyymmdd(tempDate);
            }
            else if(type == "FOLLOWUPTODAY")
            {
                searchObject["FOLLOW_UP_DATE"] = yyyymmdd(tempDate);
            }
            else if(type == "MYRECORDS")
            {
                searchObject["ASSIGNED_TO"] = "Troy";
            }
            else if(type == "ALL")
            {
                searchObject["1"] = "1";
            }
            var searchObjectString = JSON.stringify(searchObject);
            var dataString = "searchRequest=" + searchObjectString  + "&action=search&rowOffset="+ rowOffset +"&rowCount=" + rowCount;
            $.ajax({
                type:"GET",
                url:"/api/itsm/incident",
                data:dataString,
                success:function(response)
                {
                    $("#pleaseWaitDialog").modal("hide");
                    var returnMessage = checkResponse(response);
                    if(returnMessage == true)
                    {
                        document.getElementById("CURRENT_FILTER_TYPE").value = type;
                        generateTableHTML(response);
                        pagination(true,'FILTER');
                    }
                    else if(returnMessage != false)
                    {
                        alert(returnMessage);
                    }
                }
            });
        }

        function searchRecord()
        {
            $("#pleaseWaitDialog").modal("show");
            var searchObject = new Object();
            $(".sbDataFields").each(function(){
                searchObject[$(this).attr("id")] = encodeURIComponent($(this).val());
            });
            var searchObjectString = JSON.stringify(searchObject);
            var dataString = "searchRequest=" + searchObjectString  + "&action=search&rowOffset=0&rowCount=1";
            $.ajax({
                type:"GET",
                url:"/api/itsm/incident",
                data:dataString,
                success:function(response)
                {
                    $("#pleaseWaitDialog").modal("hide");
                    var returnMessage = checkResponse(response);
                    if(returnMessage == true)
                    {
                        generateTableHTML(response);
                        pagination(false,'SEARCH');
                    }
                    else if(returnMessage != false)
                    {
                        alert(returnMessage);
                    }
                }
            });
        }
    </script>
  </body>
</html>

Here's my nodejs server program.这是我的 nodejs 服务器程序。

var express = require('express');
var bodyParser = require('body-parser');
var urlencodedParser = bodyParser.urlencoded({ extended: false });
var mysql      = require('mysql');
var $ = require('jquery');
var settings = {
        host: 'cgs-devdb.czspzuv6lcaw.us',
        database: 'Customer 360',
        user: 'cgsadmin',
        password: 'cypre55gs'
    };
// Express
var app = express();
app.use(express.static(__dirname + '/public'));
app.use(bodyParser.urlencoded({ extended: false}));
app.use(bodyParser.json());

app.get('/dashboard.html', function (req, res) {
       res.sendFile( __dirname + "/" + "dashboard.html" );
    });

// Get information submitted
app.get('/api/itsm/incident', function(req, res){
    var obj = {};
    var jsonString = JSON.stringify(req.body);
    console.log('body: ' + JSON.stringify(req.body));
    console.log(req.body);
    var qb = require('node-querybuilder').QueryBuilder(settings, 'mysql', 'single');
    // Generating Query
    qb.select('*')
    .where(req.body)
    .get('SM_INCIDENT', function(err,response) {
        if (err) return console.error("Uh oh! Couldn't get results: " + err.msg);

        console.log("Query Ran: " + qb.last_query());

        console.log(response);
        res.send(response); // sending back the response to ajax
    });
});
// Start server
app.listen(8000);
console.log("API is running on port");

These are the errors I am getting.这些是我得到的错误。

Here is the folder structure of my Node JS project这是我的 Node JS 项目的文件夹结构

I am finding it difficult to get the exact html page because of the scripts are not being included.我发现很难获得确切的 html 页面,因为没有包含脚本。 Help me out in finding the mistake.帮我找出错误。 Thanks !!谢谢 !!

It looks like you want to change:看起来你想改变:

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

to:到:

app.use(express.static(__dirname + '/Web-Content'));

Or just rename the Web-Content folder to public .或者只是将Web-Content文件夹重命名为public

It worked, when I changed它起作用了,当我改变时

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

To

app.use(express.static(__dirname + '/'));
const express = require('express');
const path = require('path');

const app = express();
const port = process.env.PORT || 3000;// Heroku will need the PORT environment variable
app.use(express.static(path.join(__dirname, 'build')));
app.get('*', (req, res, next) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
  console.log(next);
});
app.listen(port, () => console.log(`App is live on port ${port}!`));
// "start": "node server.js",










1. Add this server.js file in your root folder 
2. Add this in your package.json file
"scripts": {
    "heroku-postbuild": "npm run-script build",
    "start": "node server.js",
    "dev-server": "node scripts/start.js",
    "build": "NODE_PATH=src/ node scripts/build.js",
    "test": "NODE_PATH=src/ node scripts/test.js",
    "prod": "npm run-script build && serve build"
  },
3. Install server package (npm install -g server)
and restart our server`enter code here`

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Node.js服务器:无法加载资源:服务器以状态404(未找到)响应 - Nodejs server: Failed to load resource: the server responded with a status of 404 (Not Found) 程序无法加载无法加载资源:服务器以404(未找到)状态响应 - Program will not load Failed to load resource: the server responded with a status of 404 (Not Found) 加载资源失败:服务器在koa2和nodejs中以404(未找到)状态响应 - Failed to load resource: the server responded with a status of 404 (Not Found) in koa2 & nodejs NodeJS 不断获取加载资源失败:服务器响应状态为 404(未找到) - NodeJS keep getting Failed to load resource: the server responded with a status of 404 (Not Found) 加载资源失败:服务器响应状态为 404(未找到)? - Failed to load resource: the server responded with a status of 404 (Not Found)? 加载资源失败:服务器响应状态为404(未找到) - getting Failed to load resource: the server responded with a status of 404 (Not Found) Angular.js库无法加载资源:服务器响应状态为404(未找到) - Angularjs libs Failed to load resource: the server responded with a status of 404 (Not Found) 加载资源失败:服务器响应状态 404(未找到) - Failed to load resource: the server responded with a status 404(not found) 加载资源失败:服务器响应状态为 404(未找到) - Failed to load resource: the server responded with a status of 404 (Not Found) 加载资源失败:服务器响应状态为 404(未找到)GoogleBooks Api - Failed to load resource: the server responded with a status of 404 (Not Found) GoogleBooks Api
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM