Serving HTML pages via c9 - jQuery post requests broken

jquery
nodejs
apache

#1

I am trying to serve a HTML page that is using jQuery to make post requests. I have tried serving the page via apache2 and also by making my own Node.js server to serve the requests.

There is no point in sharing my code example since I am making a request to a URL that requires an API key so unless you pay for the service you can’t test with this particular URL.

The post request works fine if I open the webpage on my local machine but if I serve it via c9 it doesn’t work. I know jQuery is loading correctly since the .fail method of the post request executes correctly to tell me the request has failed. Any ideas?

Edit:

Below is an example you can run yourself. If you copy this code and save it into a .html file on your local machine and open it in google chrome and press the button it will create a popup saying Success.

If however you create a fresh node.js workspace, save the below code as a html file and then right click > run, and then access the generated link in google chrome it will always create a popup saying Failed.

Here is the code:

<html>
    <head>
        <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    </head>
    <body>
        <form>
            <input type="button" value="Make Request" id="requestBtn">
        </form>
        <script>
            $(document).ready(function(){
                $("#requestBtn").click(function(){
                    $.post("http://httpbin.org/post", function(data){
                        alert("Success");
                    }).fail(function(){
                        alert("Failed");
                    });
                });
            });
        </script>
    </body>
</html>

Any ideas?


#2

Hi,

In the above snippet, you’re trying to request a resource over HTTP from within an HTTPS url, so your browser is blocking the connection. Here’s the updated script I tried that worked for me:

<html>
    <head>
        <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    </head>
    <body>
        <form>
            <input type="button" value="Make Request" id="requestBtn">
        </form>
        <script>
            $(function(){
                $("#requestBtn").click(function(){
                    $.post("https://httpbin.org/post", function(data){
                        alert("Success");
                    }).fail(function(){
                        alert("Failed");
                    });
                });
            });
        </script>
    </body>
</html>

Note the https in the url.

Regarding the issue you’re getting when you try to access the server running on Cloud9, can I ask if your application url is public? If not, any API calls made to it will be shown a Cloud9 authentication page causing them to fail.

To make your application url public, click on ‘Share’ near the top right of the IDE, and check ‘Public’ in the ‘Application’ row. This will keep your code private, but your application url public.

I hope this helps.

Regards,
​Mutahhir


#3

Why does the URL need to be HTTPS? httpbin is not encrypted and works on HTTP protocols.

Changing it to HTTPS did fix it, and my application link was already public. How come the protocol must be HTTPS even though the site it is requesting to is not? Surely once the page is served the request is made from the browser and has nothing to do with cloud9?


#4

Hi,

Good to know that worked for you. A few things to note:

  • The browser ensures that no insecure content (via HTTP) is loaded within a HTTPS page. This is for security reasons.
  • Cloud9 allows you to access your running application via HTTP and HTTPS both. So you can use ‘http://…’ to not have to make all urls HTTPS
  • Accessing your running application via HTTP can only be done when using a new tab, not within the preview pane.

Hope this helps.

Regards,
​Mutahhir