Warm tip: This article is reproduced from serverfault.com, please click
client client-server javascript node.js server

Node.js cannot find client-side files

发布于 2020-11-30 03:15:49

I have a simple node.js app:

server.js

const express = require('express');
const app = express();

const PORT = 8080;

app.use(express.static('client'));

// Start the express web server listening on 8080
app.listen(8080, () => {
  console.log('Service started on port 8080.');
});

// Serve the homepage
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

index.html

<html>
... irrelevant junk ...
<script src="js/client.js"></script>
</html>

However, when I run node server.js and open localhost:8080, the console complains that it can't find http://localhost:8080/javascript/client.js.

Obviously, I want it to be looking at ./javascript/client.js, instead of rooted at the locahost addr -- how to resolve?

The folder hierarchy is simple:

.
├── index.html
├── server.js
├── js
    └── client.js

I've tried to change public to client as suggested here but that didn't help.

Questioner
Alex Coleman
Viewed
0
分享
jfriend00 2020-11-30 11:35:19

Based on where your files are located on the server, you should make three changes:

app.use(express.static("./public"));

And, in the client, use this:

<script src="/js/client.js"></script>

Then, move your client-side files below the server-side files into a root public directory like this:

.
├── index.html
├── server.js
├── public
    ├── js
        └── client.js

Without moving the client-side files into public, then you open up your server-side code to being read by the client (which you do not want).

Here's how this works:

The client requests:

http://localhost:8080/js/client.js

express.static() sees a request for:

 /js/client.js

It starts at the root of your public files and combines /js/client.js onto the public directory path which then creates the right path to access:

public/js/client.js

You could have made it work without moving the client-side files into the public directory hierarchy, by just doing this:

app.use(express.static(__dirname));

But, then that would have opened up all your server-side files to be read by the client which you really do not want.

热门帖子

1
推荐一些好玩的/大众的手游
2
求指教后端项目迁移方案
3
迷你洗衣机是不是都是智商税？
4
求助一个排查了半年没解决的 MySQL order by 子句导致索引失效的问题， 500 多万条记录的小表要查快两分钟
5
个人开发了一款 WordPress 主题： iPao，集成了 AI 总结功能
6
偶然发现奇游加速器会在系统里植入根证书
7
国内有蒲公英替代品推荐吗？
8
语音助手这个东西真的会监听谈话并且上传，从而泄漏隐私吗？
9
出一些有意思的域名-明盘
10
jetbrains 全家桶升级 2024 后，在滚动代码时候感觉有点掉帧

热门github

1
Implementation of paper - YOLOv9: Learning What You Want to Learn Using Programmable Gradient Information
2
A Windows and Office activator using HWID / Ohook / KMS38 / Online KMS activation methods, with a focus on open-source code and fewer antivirus detections.
3
Get up and running with Llama 2, Mistral, Gemma, and other large language models.
4
该项目可以让你通过订阅的方式使用Cloudflare WARP+，自动获取流量。This project enables you to use Cloudflare WARP+ through subscription, automatically acquiring traffic.
5
Multi functional app to find duplicates, empty folders, similar images etc.
6
Xray panel supporting multi-protocol multi-user expire day & traffic & ip limit (Vmess & Vless & Trojan & ShadowSocks & Wireguard)
7
The Free Software Media System
8
lightweight, standalone C++ inference engine for Google's Gemma models.
9
📚 Freely available programming books
10
A collective list of free APIs
11
1️⃣🐝🏎️ The One Billion Row Challenge -- A fun exploration of how quickly 1B rows from a text file can be aggregated with Java
12
🎓 Path to a free self-taught education in Computer Science!
13
Curso para aprender el lenguaje de programación Python desde cero y para principiantes. 75 clases, 37 horas en vídeo, código, proyectos y grupo de chat. Fundamentos, frontend, backend, testing, IA...
14
This repository contains System Design resources which are useful while preparing for interviews and learning Distributed Systems
15
Mamba is a new state space model architecture showing promising performance on information-dense data such as language modeling, where previous subquadratic models fall short of Transformers. It is based on the line of progress on structured state space models, with an efficient hardware-aware design and implementation in the spirit of FlashAttention.