CODEWITHSUNDEEP
ajaxapiexpresswebserverstatic-html
ffConundrums
ffConundrums

Reputation: 865

Call express (node.js) APIs from static HTML page on host

I have a static HTML page, hello.html. If I double click hello.html, it opens up in my default browser, and displays the HTML properly, but in the browser's search bar, instead of having a URL with a hostname, what displays is the local filepath for hello.html on my computer.

I have made a simple express web server on my computer, using express (node.js). It is set to listen on port 8080, and has a simple GET api. (The API right now does something simple like call 'ls'). I wanted to be able to call that GET API, from my static hello.html. In my static HTML page, I use jquery to make an ajax call to this api, calling it as http://127.0.0.1:8080/myapi. Once I start the express server and load the page, looking at the console logs, the requests to myapi are going through when I load the static HTML page in the browser (the ls response is getting logged on the console), however, the jquery ajax in the HTML page, always executes the error function, even when I'm setting the response as 200.

I was reading a lot about why this happens, and read it could be due to CORS issue. However, there is no hostname I can specify on the server side, to allow in this case, since there is not actually a web server running, and so there is no actual host name associated with my static HTML page.

Is this even possible to do? (To have a static HTML page on your computer with no web server running, make your own express server with APIs, and call those APIs from the static web page?)

Example:

hello.html

<html>
<head>
<title>Hello World</title>
</head>
<body>
<script src"js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
     $.ajax({
        type: "GET",
        url: "http://127.0.0.1:8080/myapi",
        contentType: 'application/json',
        success: function(response) {
               alert("success!");
        },
        error: function(jqXHR, textStatus, errorThrown) {
                alert("error");
        },
    });
});
</script>


<p>Hello World!</p>
</body>
</html>

myserver.js:

var express = require('express');
var shelljs = require('shelljs');
var app = express();

app.get('/myapi', function (req, res) {

      shellStr = shelljs.exec('ls');
      if ( shellStr ) {
            console.log("successful call on server side");
            res.status(200);
            res.json({ ls: shellStr });
      }
      else {
           console.log("failure status on server side");
           res.status(500).json({ error: "Could not do ls"});
      }
})

var server = app.listen(8080, function() {
     console.log("Listening on 8080");
})

I am starting up the server by giving 'node myserver.js', and then I open the static HTML page in the browser. When it loads, the API call is being made, as I see the server side console output, and it's going as success. However, back in the static html, the ajax call's 'error' function is always executed.

Upvotes: 1

Views: 4537

Answers (1)

ffConundrums
ffConundrums

Reputation: 865

I got it to work!

In case anyone else ever wonders, and is new to express and web servers like myself.

The key was to have express serve hello.html as well. It is simple to do this.

I had my express server in a directory like this:

myserver/myserver.js <-- this is my express server

I moved all of my static html files, in to a directory at the same level.

myserver/htmlfiles/ <-- this directory has 'hello.html'.

Now, in myserver.js, I added the following line near the top, just after var app = express():

app.use(express.static('myhtml'))

What this does, is it will tell express to serve any static files in the directory myhtml (will search for that directory, relative to where the myserver.js is.)

If I restart the express server (kill the current one then just run 'node myserver.js' again), and go to the browser, if I visit http://127.0.0.1:8080/hello.html - the page shows up!

Now the domain origin is the same, and when the ajax call is made to the api, it is successful in the browser, too!

(Note - I did have an issue at first after these changes, because my ajax URL in hello.html was calling http://localhost:8080/myapi, but I was displaying hello.html in the browser via http://127.0.0.1:8080/hello.html. Once I changed the ajax URL being called to http://127.0.0.1:8080/myapi - everything worked. Similarly, if I open the browser and go to http://localhost:8080/hello.html and display hello.html that way, if the ajax URL being called is http://127.0.0.1:8080/myapi - the ajax call will go in to the 'error' function. It seems that the hostname you are using in the ajax URL in the HTML page, must be the same (127.0.0.01 vs. localhost) as the hostname you are using to visit the html page in the browser when the call is made.)

Upvotes: 1

Related Questions