0

I am trying to get a json but I cannot get anything.

This is my code:

    <div class="container">
        <h1>Ver listas de usuarios</h1>
        <form id="getUsers">
            <input id="getUsersButton1" type="submit" value="Ver usuarios">
            <input id="getUsersButton2" type="button" value="Ver usuarios 2">
            <button id="getUsersButton3" onclick="fetchUserData()">Ver usuarios</button>
        </form>
    </div>
    <div id="usersList"></div>
    <script>
        document.getElementById("getUsersButton1").addEventListener('click', fetchUserData)
        document.getElementById("getUsersButton2").addEventListener('click', fetchUserData)
        document.getElementById("getUsersButton3").addEventListener('click', fetchUserData)

        function fetchUserData() {
            fetch('http://localhost:8080/api/users')
                .then(function (response) {
                    return response.json();
                })
                .then(function (response) {
                    console.log(response);
                });
        }
    </script>

When I go to read the browser console, I cannot see anything. Thanks guys.

EDIT I changed input type to button and I have this error:

https://i.stack.imgur.com/9zB4P.png


Access to fetch at 'http://localhost:8080/api/users/' from origin 'null' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:8081' that is not equal to the supplied origin. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

seeUsers.html:32 GET http://localhost:8080/api/users/ net::ERR_FAILED
fetchUserData @ seeUsers.html:32

seeUsers.html:1 Uncaught (in promise) TypeError: Failed to fetch
Promise.then (async)
fetchUserData @ seeUsers.html:36
TheFJS14
  • 1
  • 4
  • 2
    you can't have 2 elements with the same id. use class instead – full-stack Aug 13 '20 at 16:50
  • Expanding on what @full-stack said — Because both the `` and the ` – Stephen P Aug 13 '20 at 18:01
  • @StephenP okay I have edited now, but my problem still not working. I thought that it could be the problem too, but I see the browser console and I cannot see anything. – TheFJS14 Aug 13 '20 at 19:45
  • Does the Network tab show that it's sending the AJAX request? Do you see a response there? – Barmar Aug 13 '20 at 19:47
  • @Barmar when I click on both buttons, website reload automatically – TheFJS14 Aug 13 '20 at 19:50
  • Change it to `type="button"` instead of `type="submit"` – Barmar Aug 13 '20 at 19:51
  • @Barmar now I have a console error. – TheFJS14 Aug 13 '20 at 19:57
  • are you going to say what the error is? – Barmar Aug 13 '20 at 20:06
  • @Barmar sorry, I uploaded an image but didnt posted the code. – TheFJS14 Aug 13 '20 at 20:12
  • There are hundreds of questions about CORS errors. You can't send an AJAX request to a different domain from the page. – Barmar Aug 13 '20 at 20:14
  • You should load the page from localhost:8080. – Barmar Aug 13 '20 at 20:14
  • @Barmar localhost:8080 is occupied by API – TheFJS14 Aug 13 '20 at 21:49
  • The API needs to send appropriate CORS headers in its responses. https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS – Barmar Aug 13 '20 at 21:50

0 Answers0