'content-type': 'text/html' not accepted until server is killed

Question

I have a simple html page and am trying to serve it via node.

When I set the content type to text/plain, the plain text of the html file loads. However, when I change it to "content-type" : "text/html" the browser tab continuously loads without update. Once I kill the node app, the browsers shows the page as if it was loaded completely.

Server code:

var http = require('http');
var query = require('querystring');
var fs = require('fs');
http.createServer(function (req, res) {
    homeRoute(req,res)
}).listen(3000);
console.log('test');


function homeRoute(req, res) {
    if (req.url === '/') {
        var html = fs.readFileSync('./Index.html', {encoding: 'utf-8'});
        res.writeHead(200, {"Content-Type": "text/html"});
        console.log(html)
        res.write(html);
        res.end();

    }

Index:

<DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Corporate Ipsum</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
    <link rel="stylesheet" href="https://necolas.github.io/normalize.css/5.0.0/normalize.css">
    <link rel="stylesheet" href="css/main.css"> </head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="src/app.js"></script>

<body>
    <div class="container my-3">
        <div class="col-sm-2">
            <form method="post"  action="/data" class="form-group">
                <label for="sentenceCount">Sentences</label>
                <input type="number" placeholder="10" name="sentencecount" id="sentenceCount" class="form-control parameters">
                <button type="button" id="submit" class="btn btn-primary mt-1">Submit</button>

            </form>

        </div>
    </div>



    <div class="container mt-2" style="border:1px solid red">
</body> </html>

Possible duplicate of [Express.js close response](http://stackoverflow.com/questions/13554319/express-js-close-response) — NineBerry, Oct 24 '16 at 01:20
Another alternative to using the connection-header is to add content-length header correctly. — NineBerry, Oct 24 '16 at 01:22
@NineBerry, thanks for the response. I've added the connection close key/value to writeHead and also tried adding content-length but I still get the same issue. — , Oct 24 '16 at 01:30

PaulBGD · Accepted Answer · 2016-10-24T01:36:34.673

1

You need to add the Content-Length header so that your browser knows when the file ends. You can that by modifying you code like so:

function homeRoute(req, res) {
    if (req.url === '/') {
        var html = fs.readFileSync('./Index.html'); // read this as a buffer
        res.writeHead(200, {"Content-Type": "text/html", "Content-Length": html.length}); // write the buffer's length
        console.log(html.toString('utf8')) // but when logging/writing explicitely say utf8
        res.write(html.toString('utf8')); // you can remove the toString here, but it adds a little readability 
        res.end();
    }

The Node.js documentation somewhat mentions this at the bottom of res.writeHead: https://nodejs.org/api/http.html#http_response_writehead_statuscode_statusmessage_headers

edited Oct 24 '16 at 01:36

answered Oct 24 '16 at 01:32

PaulBGD

2,018
5
22
30

@PaulBDG, thanks. I added the content length field but still have the same issue. any idea why? – Oct 24 '16 at 01:36
What browser are you using? – PaulBGD Oct 24 '16 at 01:36
Chrome Version 53 – Oct 24 '16 at 01:37
I'm running your original code and I'm not noticing any issues. Firefox and Chrome load it immediately without me even expressing the Content-Length header. I'm wondering if a browser extension might be stopping it from loading, or any other code you have. – PaulBGD Oct 24 '16 at 01:39
It seems to be loading the headers of the html but not the body. I added console.log('ended') to the res.end and I do see it so it is ending. I've disabled cache, extensions etc. I've added the index code if that helps – Oct 24 '16 at 01:45
Maybe Index.html doesn't exist (notice the capital) and it's sending an empty buffer? – PaulBGD Oct 24 '16 at 01:47
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/126480/discussion-between-something-is-missing-and-paulbgd). – Oct 24 '16 at 01:49
Sorry - hit that by mistake. I'm console logging index and it comes up so it seems to be found. Weird – Oct 24 '16 at 01:50
I'm not sure at this point, the issue seems to be further than the code that you've given. At this point anything I say are just guesses. For instance, is it unable to load your .js file and it's blocking rendering? – PaulBGD Oct 24 '16 at 01:54
I tried it on another computer and the issue remains so I'm wondering if maybe I'm loading poorly on the browser. I'm using localhost:3000 is there something else you'd do? – Oct 24 '16 at 02:01
Again, is your server not sending the src/app.js file and so the webpage rendering gets blocked while it waits forever for the server to send the file? – PaulBGD Oct 24 '16 at 02:10
I got it! (I think). It seems to have been a link tag in the head of the html doc. I removed the problem link and now it loads. thanks for all your help – Oct 24 '16 at 02:17

'content-type': 'text/html' not accepted until server is killed

1 Answers1