Thiết kế website giá rẻ

Question

community,

I’m writing a nodejs server that shall serve static files, as well, as serve XHR POST requests. The problem that I faced with, is that for localhost, the script does not get loaded. More to that, the browser does not even send GET request to fetch script file.
Interestingly the CSS style sheet get served.

I’ve investigated this for two days, and ran out of options to search for. Please advice.

Below is my nodejs server, HTML page and script file.

nodejs =>

const https = require('https');
const fs    = require('fs');
const url   = require('url');

var opts = {
    key:  fs.readFileSync('./cert/key.pem'),
    cert: fs.readFileSync('./cert/cert.pem')
};

function serve_file(fn, headers, res) {
 fs.readFile(fn, function(error, data) {
  if (error) {
   res.writeHead(404);
   res.write(error);
   res.end();
  } else {
   res.writeHead(200, headers);
   res.write(data);
   res.end();
  }
 });
}

var app = function (req, res) {
 const real_url   = (req.connection.encrypted ? 'https': 'http') + '://' + req.headers.host + req.url;
 const parsed_url = url.parse(real_url, true);
 const { method, headers } = req;

 console.log(method);
 console.log(req.url);
 console.log(req.headers.referer);

 if (req.method === 'OPTIONS') {
  var out_headers = {};
  out_headers["Access-Control-Allow-Origin"] = "https://localhost:4433/*";
  out_headers["Access-Control-Allow-Methods"] = "GET, POST, OPTIONS";
  out_headers["Access-Control-Allow-Headers"] = "X-Requested-With, Content-Type, Content-Length, Authorization";
  out_headers["Access-Control-Max-Age"] = '86400'; // 24 hours
  out_headers["Access-Control-Allow-Credentials"] = true;
  res.writeHead(200, out_headers);
  res.end();
 } else if (req.method === 'POST') {
  console.log('POST: ' + parsed_url.path + 'n');
  var out_headers = {};
  out_headers["Access-Control-Allow-Origin"] = "https://localhost:4433/*";
  out_headers["Access-Control-Allow-Methods"] = "GET, POST, OPTIONS";
  out_headers["Access-Control-Allow-Headers"] = "X-Requested-With, Content-Type, Content-Length, Authorization";
  out_headers["Access-Control-Max-Age"] = '86400'; // 24 hours
  out_headers["Access-Control-Allow-Credentials"] = true;
  res.writeHead(200, out_headers);
  res.end();

  console.log(req.body);
 } else if (req.method === 'GET') {
  var out_headers = {};
  out_headers["Access-Control-Allow-Origin"] = "https://localhost:4433/*";
  out_headers["Access-Control-Allow-Methods"] = "GET, POST, OPTIONS";
  out_headers["Access-Control-Allow-Headers"] = "X-Requested-With, Content-Type, Content-Length, Authorization";
  out_headers["Access-Control-Max-Age"] = '86400'; // 24 hours
  out_headers["Access-Control-Allow-Credentials"] = true;
  
  switch(parsed_url.path) {
  case '/login':
   out_headers["Content-Type"] = "text/html";
   serve_file('./login.html', out_headers, res);
   break;
  case '/script/login.js':
   out_headers["Content-Type"] = "text/javascript";
   serve_file('./script/login.js', out_headers, res);
   break;
  case '/css/main.css':
   out_headers["Content-Type"] = "text/css";
   serve_file('./css/main.css', out_headers, res);
   break;
  }  

  console.log('GET: ' + parsed_url.path + 'n');
 }

}

https.createServer(opts, app).listen(4433);

login.html =>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script type="type/javascript" src="script/login.js" defer></script>
</head>
<body>
    <div class="login-container">
        <form id="login-form">
            <h1>Login</h1>
            <input type="text"     placeholder="Username" class="input-field" id="username" required>
            <input type="password" placeholder="Password" class="input-field" id="password" required>
            <button type="submit">Login</button>
        </form>
    </div>
</body>
</html>

script =>

console.log('script')

document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('login-form');
    
    form.addEventListener('submit', function(event) {
        event.preventDefault(); // Prevent the default form submission
        
        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;
        
        const xhr = new XMLHttpRequest();
        const url = 'https://localhost:4433/login';
        
        xhr.open('POST', url, true);
        xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                // Handle the response from the server here
                console.log(xhr.responseText);
            }
        };
        
        const data = JSON.stringify({ username: username, password: password });
        xhr.send(data);
    });
});

nodejs server log:

GET /login undefined GET: /login

GET /css/main.css https://127.0.0.1:4433/login GET: /css/main.css

GET /favicon.ico https://127.0.0.1:4433/login GET: /favicon.ico

The browser developer interface =>

The broser developer interface does not report any errors.

Thiết kế website giá rẻ

Danh mục

Browser does not send GET request to load Javascript file