Within my node.js application, I have configured an endpoint where I can load some parsed HTML code. This is achieved through the following code:
app.get('/code', function (req, res) {
res.setHeader('Content-Type', 'text/html');
res.send(code.html);
});
The 'code' variable is a JSON object structured like this:
code = { html: 'Containing a bunch of HTML, CSS, and JavaScript taken from another site.' };
In my index file, there is an iframe defined as follows:
<iframe src="http://localhost:port/code" width="400" height="400"></iframe>
While the iframe appears to be functioning, I am facing issues with loading the view properly as most of the CSS and JavaScript are not being parsed correctly. An error message is displayed:
Refused to apply style from 'http://localhost:3000/docs/4.3/dist/css/bootstrap.min.css' because its MIME type ('text/html') is not supported and strict MIME checking is enabled.Although the HTML is being parsed, the appearance of the view is distorted and the CSS and JavaScript are not executing as intended. Upon inspecting the network in Chrome, it is observed that every request URL for stylesheets and scripts is appended to the localhost address. Is this causing the parsing issues? How can this problem be resolved?