웹 애플리케이션에서 index.html, client.js 및 server.js를 연결하는 방법은 무엇입니까?

index.html, client.js, server.js 연결

소개

웹 애플리케이션을 구축할 때 HTML, 클라이언트 측 JavaScript 및 서버 측 코드를 연결하는 것이 중요합니다. 이 문서에서는 이러한 구성 요소를 연결하는 동안 발생하는 오류를 살펴보고 이들 간의 성공적인 통신을 위한 솔루션을 제공합니다.

문제

Node.js 애플리케이션을 다음과 함께 실행하려고 하면 오류가 발생합니다. 다음 코드:

<!-- index.html -->
<!-- Script referencing client.js -->

// client.js
// JavaScript code

// server.js
// Server code
// Reading index.html contents

분석

오류는 요청된 리소스와 서버에서 보낸 응답이 일치하지 않음을 나타냅니다. 브라우저가 client.js를 요청하는데 대신 index.html을 수신하여 구문 오류가 발생합니다.

해결책

1. Express 미들웨어 사용

정적 파일 제공을 단순화하는 Express 프레임워크 사용을 고려해보세요. 다음 코드 조각은 Express:

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

// Serve static files from the 'public' directory
app.use(express.static('public'));

// ... Server configuration and routing

2를 사용하여 client.js를 제공하는 방법을 보여줍니다. 서버 코드에서 리소스 요청 처리

또는 서버 코드에서 직접 리소스 요청을 처리합니다.

// server.js

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

const server = http.createServer((req, res) => {
  if (req.url === '/client.js') {
    fs.readFile('client.js', (err, data) => {
      if (!err) {
        res.writeHead(200, { 'Content-Type': 'text/javascript' });
        res.end(data);
      } else {
        res.writeHead(404);
        res.end('File Not Found');
      }
    });
  } else if (req.url === '/index.html') {
    // Serve index.html using similar logic
  }
});

server.listen(8080);

리소스 요청을 적절하게 처리하면 서버가 요청 시 client.js를 제공할 수 있습니다. 오류를 방지합니다.

위 내용은 웹 애플리케이션에서 index.html, client.js 및 server.js를 연결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!