Consuming a RESTful Web Service with jQuery don't work

Question

I've done everything like in this tutorial: https://spring.io/guides/gs/consuming-rest-jquery/ This is my index.html:

<!DOCTYPE html>
<html>
    <head>
        <title>Hello jQuery</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="hello.js"></script>
    </head>

    <body>
        <div>
            <p class="greeting-id">The ID is </p>
            <p class="greeting-content">The content is </p>
        </div>
    </body>
</html>

And this is hello.js:

$(document).ready(function() {
    $.ajax({
        url: "http://localhost:8080/greeting"
    }).then(function(data) {
       $('.greeting-id').append(data.id);
       $('.greeting-content').append(data.content);
    });
});

Html and js files are on xampp on htdocs\rest folder, rest api works on intellij idea prebuild tomcat. This is result: picture 1

This is restult of rest api: picture 2

What did I wrong?

Edit: This is java spring boot code:

@RestController
public class GreatingController {

    private static final String template = "Hello, %s!";
    private final AtomicLong counter = new AtomicLong();

    @CrossOrigin(origins = "http://localhost:8080")
    @GetMapping("/greeting")
    public Greeting greeting(@RequestParam(required = false, defaultValue = "World") String name) {
        System.out.println("==== get greeting ====");
        return new Greeting(counter.incrementAndGet(), String.format(template, name));
    }
}

To debug anything to do with JS open dev tools and look in the console. You will see an error you can debug if something has gone wrong. My guess in this case would be a CORS issue — Rory McCrossan, Dec 07 '20 at 09:49
Yes, you' re right, there is this error: Image: https://ibb.co/FsNMsB8 — Jakub, Dec 07 '20 at 09:57
But how to fix this? This is my rest api code: ``` @RestController public class GreatingController { private static final String template = "Hello, %s!"; private final AtomicLong counter = new AtomicLong(); @CrossOrigin(origins = "http://localhost:8080") @GetMapping("/greeting") public Greeting greeting(@RequestParam(required = false, defaultValue = "World") String name) { System.out.println("==== get greeting ===="); return new Greeting(counter.incrementAndGet(), String.format(template, name)); } } ``` — Jakub, Dec 07 '20 at 09:59
sorry for pasting the code like this, but its formatting tag doesn't work in the comment — Jakub, Dec 07 '20 at 10:00
@Jakub It's because you should add all relevant code to the original question by editing it. — Zsolt Meszaros, Dec 07 '20 at 10:01
To fix this you need to include CORS headers in the response from your server. If you google 'CORS headers [your langauge]' you'll find your answer — Rory McCrossan, Dec 07 '20 at 10:02
You need to add CORS headers. It should help: https://spring.io/guides/gs/rest-service-cors/ — Zsolt Meszaros, Dec 07 '20 at 10:03

Consuming a RESTful Web Service with jQuery don't work

0 Answers0