I am trying to transfer all the JavaScript to a separate js file and then adding that js file to the html like the usual practice. But console shows the following error -
The resource from “http://localhost:3000/public/main.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
I have build a socket.io basic chat application in Nodejs and express which works on the http server.
const { Socket } = require("dgram");
const express = require('express');
const app = express();
const http = require("http").Server(app);
const io = require("socket.io")(http);
app.use(express.static('public'));
app.get("/", (req, res, next) => {
//res.setHeader('content-type','application/javascript')
res.sendFile(__dirname + "/index.html");
});
var user = "";
io.on("connection", (socket) => {
socket.on('userName', (person) => {
user = person;
console.log(person + " connected");
});
socket.on('chat message', (data) => {
//console.log('message: ' + msg);
io.emit('chat message',{user: data.sending_user,message: data.message});
});
socket.on('disconnect', () => {
console.log(user+" disconnected");
});
});
http.listen(3000, () => {
console.log("listening on *:3000");
});
the client side html code -
<!DOCTYPE html>
<html>
<head>
<title>Chat</title>
<script src="/socket.io/socket.io.js"></script>
<script type="application/javascript" src="/main.js" ></script>
<style>
body {
margin: 0;
padding-bottom: 3rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
#form {
background: rgba(0, 0, 0, 0.15);
padding: 0.25rem;
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
height: 3rem;
box-sizing: border-box;
backdrop-filter: blur(10px);
}
#input {
border: none;
padding: 0 1rem;
flex-grow: 1;
border-radius: 2rem;
margin: 0.25rem;
}
#input:focus {
outline: none;
}
#form>button {
background: #333;
border: none;
padding: 0 1rem;
margin: 0.25rem;
border-radius: 3px;
outline: none;
color: #fff;
}
#messages {
list-style-type: none;
margin: 0;
padding: 0;
}
#messages>li {
}
#messages .userName {
font-size: 0.7em;
padding-top: -0.5em;
color:darkslateblue;
}
</style>
</head>
<body onload="myFunction()">
<ul id="messages"></ul>
<form id="form" action="">
<input id="input" autocomplete="off" /><button>Send</button>
</form>
</body>
</html>
the main.js javascript for the html file-
var user;
var socket = io();
function myFunction() {
var person = prompt("Please enter your name:");
user = person;
console.log(person + " from html");
socket.emit("userName", person);
}
var form = document.getElementById("form");
var input = document.getElementById("input");
form.addEventListener("submit", function (e) {
e.preventDefault();
if (input.value) {
socket.emit("chat message", { sending_user: user, message: input.value });
input.value = "";
}
});
socket.on("chat message", function (data) {
var item = document.createElement("li");
var name = document.createElement("li");
name.setAttribute("class", "userName");
name.textContent = data.user;
item.textContent = data.message;
messages.appendChild(name);
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
module.exports = 'main.js';
I am guessing there is some problem with serving the js file through the server, Does the content-type have to be specified somewhere explicitly? I haven't found any extra steps in the other code i found on a similar github project.
question from:
https://stackoverflow.com/questions/65920045/the-resource-from-http-localhost3000-script-js-was-blocked-due-to-mime-type 
