2

I am trying to call following url using get request.

http://localhost:8080/abc/employees

When I opened above url in browser, I am getting following response.

[{"firstName":"Hari Krishna","id":1,"lastName":"Gurram","permAddrees":{"area":"Marthali","city":"Bangalore","country":"India","state":"Karnataka"},"tempAddrees":{"area":"Electronic City","city":"Bangalore","country":"India","state":"Karnataka"}},{"firstName":"PTR","id":2,"lastName":"PTR","permAddrees":{"area":"Bharath Nagar","city":"Hyderabad","country":"India","state":"Andhra Pradesh"},"tempAddrees":{"area":"BTM Layout","city":"Bangalore","country":"India","state":"Karnataka"}}]

Following is my jquery snippet.

<!DOCTYPE html>
<html>
    <head>
        <script src = "jquery-3.1.0.js"></script>
    </head>

    <body>  
        <h1>Click the below button to see the AJAX response</h1>
        <input type="submit" value="click here" id="button1" />

        <div id="placeHolder">

        </div>


        <script type="text/javascript">
            var jq = jQuery.noConflict();

            jq(document).ready(function(){
                jq("#button1").click(function(){
                    alert("Hello");
                    jq.get("http://localhost:8080/abc/employees", function(data, status){
                        alert(data + "" + status);
                        jq("#placeHolder").html(response);
                    });
                });
            });
        </script>
    </body>
</html>

When I click the button, it is showing first alert box 'alert("Hello");', but the alert box in call back function is not executed. Can any one help me to figure out the issue with my code. enter image description here

enter image description here

Hari Krishna
  • 3,133
  • 1
  • 24
  • 47
  • When you debug this, how specifically does it fail? What is the response from the server? Are there any errors? – David Aug 17 '16 at 16:30
  • Hi David, Added screen shots, As you see the header section 'Content-Length is 244' coming. But when I go to response section, it is empty. – Hari Krishna Aug 17 '16 at 16:39
  • Is the path to jquery correct? I checked , it works well(after the path to jquery is given) in chrome. – cafebabe1991 Aug 17 '16 at 16:48
  • You have `response` in your call, but you're not defining it anywhere - you should be getting an error in console. You're actually making call to `/abc/employees/1` in the screenshot. By any chance is your output different based upon what header the request uses (json / html)? Also - please not use `alert` but `console.log` - `alert` by default stringifies everything, so it's useless in debugging (you still should have a string in Chrome Response tab irregardless) – eithed Aug 17 '16 at 16:50
  • isnt there any console error reporting of CORS policy ? – cafebabe1991 Aug 17 '16 at 16:53
  • @cafebabe Hey path to the jquery is correct. I tried in chrome version 'Version 52.0.2743.116 (64-bit)', it is not working for me. But when I tried on Safari, it works fine. I am getting proper response... – Hari Krishna Aug 17 '16 at 16:54
  • @HariKrishna , Have a look at my answer – cafebabe1991 Aug 17 '16 at 17:01

2 Answers2

1

Short answer

Safari allows it and chrome does not allow (CROSS ORIGIN REQUEST SHARING - CORS).

An experiment :

Let's execute a request from this html file to "www.google.com" from our "localhost".

What happens in chrome ?

In chrome , CORS (CROSS ORIGIN REQUEST SHARING) is not allowed and hence it stops you in doing that.

Chrome gives the error as show below for http://www.google.com

Read about it here...

What happens in Safari ?

Safari allows this behaviour and hence you get this response from http://www.google.com

Proof I have added url as http://www.google.com, and hence this response comes

Community
  • 1
  • 1
cafebabe1991
  • 4,690
  • 2
  • 30
  • 40
0

Looks like you want to access localhost for your file which is not part of locahost

Two things can be done:

  1. Make the file a part of your localhost web application

  2. Make proper CORS settings, for instance is you are using JERSEY use the following.

How to handle CORS using JAX-RS with Jersey

Community
  • 1
  • 1
user3306013
  • 52
  • 4