Saya baru mengenal node.JS, dan telah mengerjakan koneksi client-server sederhana, di mana file index.html disajikan kepada pengguna di localhost. File index.html saya berfungsi dengan baik ketika dibuka tanpa server, tetapi segera setelah saya menyajikannya melalui node, gambar apa pun, iframe, atau skrip dengan jeda src lokal.

Untuk visual, saya memiliki yang berikut di index.html:

<html>
<body>
<h1>Hello!</h1>
<img src="doggy.png"/>
</body>
</html>

File node saya (server.js) menyajikan file dengan kode di bawah ini:

const http = require('http')
const fs = require('fs')

const server = http.createServer((req, res) => {
  res.writeHead(200, { 'content-type': 'text/html' })
  fs.createReadStream('index.html').pipe(res)
})

server.listen(process.env.PORT || 3000)

Dengan hasil keseluruhan menjadi judul Hello! ditampilkan di localhost:3000, tetapi gambar tidak berfungsi.

Saya yakin masalah ini terkait dengan pengalaman relatif saya dengan node, dan bukan apa pun di dalam html, mungkin itu bahkan perilaku yang dimaksudkan karena kebijakan keamanan? Saya berharap seseorang dapat mengatasi ini dengan cara yang dapat saya pahami, dan bahkan mungkin memberikan beberapa solusi, saya akan dengan senang hati mendukung siapa pun yang mau meluangkan waktu untuk itu.

-1
Finn_Lancaster 13 Mei 2021, 00:38

1 menjawab

Jawaban Terbaik

Jika Anda melayani situs web Anda dengan server HTTP, seperti NodeJS, Anda harus menggunakan server yang sama untuk memberikan aset atau sumber referensi ke browser seperti CSS, JS, dan file tertaut lainnya.

Kode berikut digunakan untuk melakukannya. Idenya adalah membuat middleware jadi sajikan file statika yang digunakan untuk file html.

const express = require('express');
const path = require('path');
const http = require('http');

const BUILDPATH = path.join(__dirname);

const { PORT = 3000 } = process.env;

const app = express();
app.set('port', PORT);

app.use(express.static(BUILDPATH));
app.get('/*', (req, res) => res.sendFile('index.html', { root: BUILDPATH }));

const httpServer = http.createServer(app);

httpServer.listen(PORT);
console.info(`🚀 Client Running on: http://localhost:${PORT}`);
0
Arael D. Espinosa Pérez 12 Mei 2021, 21:47