Node+Express引入JS文件遇404及ERR_HTTP_HEADERS_SENT错误求助

Hey there! Let's break down and resolve your two errors one by one—they're both common pitfalls for new Express developers, so you're in good company.

1. Fixing the Error [ERR_HTTP_HEADERS_SENT] #

This error pops up because you're trying to send two separate responses to the same HTTP request in your homepage route. In your routes/index.js file, you first call res.render() (which sends the rendered EJS page to the client), then immediately call res.sendFile()—this tries to fire off a second response after the first one has already been sent, causing a header conflict.

The Fix: Remove the duplicate response #

Update your routes/index.js to only use res.render() (since that's what you need to serve the EJS page). I also added the missing require('express') line which was missing in your original code:

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
  // Delete the res.sendFile('index.js') line here—it's unnecessary and causes the error
});

module.exports = router;

2. Resolving the 404 for /odatafunction.js #

There are two small issues causing this 404, plus a couple of related fixes to get your table rendering working:

A. Fix file placement and static path reference #

First, make sure your odatafunction.js file lives in one of the static directories you defined in app.js. You've set up static serving for public, public/javascript, and public/stylesheets—so move odatafunction.js into public/javascript/, then update your index.ejs to reference it correctly:

<script type="text/javascript" src="/javascript/odatafunction.js"></script>

B. Fix incorrect script tag usage #

Right now, you're combining an external script reference and inline code in the same <script> tag—browsers ignore inline code in tags that have a src attribute. Split them into separate tags, and add jQuery (since your code uses $ but you haven't included it!):

<!-- Load external OData script first -->
<script type="text/javascript" src="/javascript/odatafunction.js"></script>
<!-- Load jQuery (required for your table rendering code) -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- Your table rendering code goes here -->
<script type="text/javascript">
$(document).ready(function () {
  // Make sure your odatafunction.js exposes the data globally (e.g., window.odataData = yourFetchedData)
  var data = window.odataData;

  var html = '<table class="table table-striped">';
  html += '<tr>';
  // Loop to create table headers
  $.each(data[0], function (index, value) {
    html += '<th>' + index + '</th>';
  });
  html += '</tr>';
  // Loop to create table rows
  $.each(data, function (index, value) {
    html += '<tr>';
    $.each(value, function (index2, value2) {
      html += '<td>' + value2 + '</td>';
    });
    html += '</tr>'; // Fixed your typo here—you had <tr> instead of </tr>
  });
  html += '</table>';
  $('body').html(html);
});
</script>

*Quick notes on the inline code:

• I fixed a closing tag typo (<tr> → </tr>) that would have broken your table structure
• Added a reminder to expose your OData data globally from odatafunction.js (e.g., window.odataData = fetchedOData;) so your inline code can access it*

Final Steps to Test #

1. Restart your Express server to apply all changes
2. Double-check that odatafunction.js is in the public/javascript/ folder
3. Load your app again—both errors should be gone, and your table should render once your OData data is properly fetched!

内容的提问来源于stack exchange，提问作者claudio gugliotta