使用Express Generator搭建项目后引入JS文件出现net::ERR_ABORTED错误求助

Hey there, let's walk through fixing that frustrating net::ERR_ABORTED error you're seeing. This almost always boils down to path mismatches or middleware ordering, so let's break it down step by step:

1. Double-Check Your File Structure & Spelling #

First, confirm your files are exactly where you think they are. Express Generator's default static root is the public folder, so your structure should look like this:

your-project/
├── public/
│   ├── js/
│   │   ├── useeasel.js
│   │   └── libs/
│   │       └── createjs.min.js
├── views/
│   ├── layout.hbs
│   └── index.hbs
└── app.js

• Watch out for case sensitivity (especially on Linux/macOS) — useEasel.js vs useeasel.js will break things.
• Make sure neither file is missing or saved to the wrong subfolder.

2. Fix Your JS File References in Handlebars #

This is the most common culprit. Since express.static maps the public folder to your app's root URL, you don't include public in your script paths.

Bad (will cause 404/ERR_ABORTED):

<script src="/public/js/libs/createjs.min.js"></script>
<script src="/public/js/useeasel.js"></script>

Good (correct path relative to the static root):

<script src="/js/libs/createjs.min.js"></script>
<script src="/js/useeasel.js"></script>

Add these lines to either layout.hbs (to load globally) or index.hbs (to load only on the home page) — just make sure they're placed before any custom code that depends on CreateJS/useEasel.

3. Verify Your express.static Middleware Setup #

Your default app.use(express.static(path.join(__dirname, 'public'))); is correct, but order matters. This middleware needs to be registered before your route handlers, otherwise Express will try to match routes first and never check for static files.

Correct order in app.js:

const express = require('express');
const path = require('path');
const routes = require('./routes/index');

const app = express();

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

// Then routes
app.use('/', routes);

// ... rest of your config

4. Quick Checks to Rule Out Edge Cases #

• File Permissions: On Linux/macOS, run chmod 644 public/js/*.js public/js/libs/*.js to ensure the server can read the files.
• Clear Browser Cache: Old cached paths can cause false errors — do a hard refresh with Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (macOS).
• Test Directly: Try accessing the JS files via your browser's address bar (e.g., http://localhost:3000/js/libs/createjs.min.js). If you see the file content, your static setup is working; if you get a 404, go back to checking file structure/paths.

Final Test #

Restart your Express server, refresh the page, and check the browser's Network tab. If the JS files load with a 200 status, you're good to go!

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