Consuming Rest Api In Js JQuery

Question

my JS and HTML is at below, when I enter this URL: http://localhost:8080/api/languages/getall in Chrome, it returns [{"id":1,"name":"c"},{"id":2,"name":"java"}],
but the code at below is not working, it might be the root caused and how to fix it?

    $.ajax({
    url: "http://localhost:8080/api/languages/getall",
    type: 'GET',
    dataType: 'json', // json?
    CORS: true ,
    contentType:'application/json',
    headers: {
        'Access-Control-Allow-Origin': '*',
    },
    success: function (data){
        console.log(data);
    }
});

html

<!DOCTYPE html>
<html>
    <head>
        <title>How to consume RESTful Web Service using jQuery</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="js/consume-rest.js"></script>
    </head>
    <body>
        <div>
            <h3>How to consume RESTful Web Service using jQuery</h3>

            <p id="id">ID: </p>
            <p id="content">Content: </p>

        </div>
    </body>
</html>

spring

  @CrossOrigin(origins = "http://localhost:8080")
  @GetMapping("/languages/getall")
  List<GetLanguageResponse>getAllResponse(){
    return languagesService.getAllResponse();
  }//it returns array of object

https://pasteboard.co/KZ7BZqMSh7yX.png the link shows the answer of backend server it works.And i also added cross origin above the code .Error is still same,"from origin 'null' has been blocked by CORS policy" and "jquery.min.js:2 GET http://localhost:8080/api/languages/getall net::ERR_FAILED"

Just to let yall know in my react code it works

const App = () => {

  const [groups, setGroups] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);

    fetch('api/languages/getall')
      .then(response => response.json())
      .then(data => {
        setGroups(data);
        setLoading(false);
      })
  }, []);

  if (loading) {
    return <p>Loading...</p>;
  }

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <div className="App-intro">
          <h2>JUG List</h2>
          {groups.map(group =>
            <div key={group.id}>
              {group.name}
            </div>
          )}
        </div>
      </header>
    </div>
  );
}

ZyDucksLover · Accepted Answer · 2022-12-11 21:45:42Z

1

First thing we could say is that your API apparently returns an array of objects, while you're trying to use data as an object directly. Also, did you try to console.log(data) in order to see what happens ? I guess your error catcher is never triggered ?

Did you try with these options ?

$.ajax({
    url: "http://localhost:8080/api/languages/getall",
    type: 'GET',
    dataType: 'jsonp', // json?
    CORS: true ,
    contentType:'application/json',
    headers: {
        'Access-Control-Allow-Origin': '*',
    },
    success: function (data){
        console.log(data);
    }
});

Also, make sure your backend sends a 2xx response and configure your CORS on the back-end side.

edited Dec 11, 2022 at 21:45

answered Dec 11, 2022 at 19:54

ZyDucksLover

4871 gold badge8 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

samaritan Over a year ago

Access to XMLHttpRequest at 'localhost:8080/api/languages/getall' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. localhost:8080/api/languages/getall:1 Failed to load resource: net::ERR_FAILED console.log(data) VM29:1 Uncaught ReferenceError: data is not defined at <anonymous>:1:13

samaritan Over a year ago

i just realized ur right it is because i have no experience in eihter js or jquery ,how should my code be?And is it best practice to use jquery for this kinda purposes like web app.Thanks in advance for your answers

ZyDucksLover Over a year ago

Try adding this header at the same level as your url for instance "headers": { "accept": "application/json", "Access-Control-Allow-Origin":"*"} Obviously it's not recommended to let the origin be ''. You should use your origin, which is localhost in that case, or your production URL. If your API is public, I believe '' is fine, it looks like this is the case :-)

samaritan Over a year ago

yes it is public i added your code but it still gives the same error

ZyDucksLover Over a year ago

Did you try with dataType: "json" or jsonp as well (jsonp is used for cross domain requests, but it looks like you're on the same domain? If it's a cross-domain request, you may need jsonpCallback too) ?

|

Collectives™ on Stack Overflow

Consuming Rest Api In Js JQuery

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related