0

I have a html file index.html with a local script script.js running in localhost:8080 using a script NodeServer.js in Node.js.

I want that, whenever I enter data in input boxes, it should get fetched by the local script and then the script.js export it to the NodeServer.js application, which would further log the data on the console.

I am using Chrome browser - 65.0.3325.181

Here is my index.html:

<!DOCTYPE html>
<html>
 <head>
  <title>Website</title>
    <!-- My local script -->
  <script src='file:///F:/RahulVerma/NodeJS/LoginPage/script.js'></script>
 </head>
 <body>
  <input type='text' placeholder='Enter username' id='username'/><br/>
  <input type='password' placeholder='Enter password' id='password'/><hr/>
    <!-- getData() is present in local script -->
  <button onclick='getData();'>Submit</button>
 </body>
</html>

Here is my script.js:

let getData = () => {
 let username = document.getElementById('username').value;
 let password = document.getElementById('password').value;

 module.exports = { username, password }; // exporting username and password to server running through node.js
}

And my NodeServer.js:

const http = require('http'); // to create server
const fs = require('fs'); // to read index.html
const script = require('F:/RahulVerma/NodeJS/LoginPage/script'); // to fetch data from script.js

// My Server
let server = (request, response) => {
 fs.readFile('F:/RahulVerma/NodeJS/LoginPage/index.html', 'utf8', (error, result) => {
  if(error) {
   response.writeHead(404, {'Content-Type': 'text/plain'});
   response.write(`Error: ${error}`);
  } else {
   response.writeHead(200, {'Content-Type': 'text/html'});
   response.write(result);
  }

  response.end();
 });
}

// Creating server
http.createServer(server).listen(8080);
console.log(script.username, script.password); // logging data onto the console

When I type node NodeServer.js in Node.js 9.3.0 (ia32) and npm, the index.html starts working on localhost:8080 but the script.js fails to render in the browser due to the following error: Not allowed to load local resource: file:///F:/RahulVerma/NodeJS/LoginPage/script.js

What am I doing wrong ?

1 Answers1

0

cors error:a mechanism that uses additional HTTP headers to let a user agent gain permission to access selected resources from a server on a different origin

// Create our server
var server;
server = http.createServer(function(req,res){
// Set CORS headers
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
response.setHeader("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers");;
if ( req.method === 'OPTIONS' ) {
    res.writeHead(200);
    res.end();
    return;
}
});

further clarification visit stack overflow cors

Best awnser link

Sanjay
  • 838
  • 1
  • 14
  • 21