localhost vs 127.0.0.1 (in chrome)

Question

• The controller that processes the two request-response below uses etag to perform client caching.
• The data for the two request-responses below are all from the second request (that is, if you received the Etag of the first request and cached it locally, you should have received a 304 response from the server with the Etag in the second request)
• Both tasks were performed in Chrome.
• Connect to http://localhost:8080/api/208

HTTP/1.1 304
Access-Control-Allow-Origin: http://localhost:8080
Date: Sat, 16 Dec 2023 03:14:56 GMT
Keep-Alive: timeout=60
Connection: keep-alive

GET /api/208 HTTP/1.1
Cache-Control: max-age=0
Connection: keep-alive
Host: localhost:8080
If-None-Match: "2023-12-15T16:48:07.554"

• http://localhost:8080/api/page → A page that returns static content called HTML.
• During the process of loading the page, a fetch request is sent to 127.0.0.1 via js.
• As a result of debugging, for the request below, a response of 200 is received even though a code that returns 304 was sent.
• If you change 127.0.0.1 written in js to localhost, 304 appears correctly.

HTTP/1.1 200
Access-Control-Allow-Origin: http://localhost:8080
Date: Sat, 16 Dec 2023 03:17:26 GMT
ETag: "2023-12-15T16:48:07.554"
Content-Type: application/json

GET /api/208 HTTP/1.1
Host: 127.0.0.1:8080
If-None-Match: "2023-12-15T16:48:07.554"
Origin: http://localhost:8080
Referer: http://localhost:8080/

• question
  • I thought 127.0.0.1 and localhost were the same local, but I was curious why the responses to those two requests were different.
  • Only Chrome does this, but other browsers (firefox, safari) properly return 304 in both situations.
  • If you open a terminal on your MacBook and send a curl request, it also works properly.
  • Why does the problem occur only in Chrome + is there a difference between localhost and 127.0.0.1?

Additional information

    @GetMapping("/{id}")
    public ResponseEntity<MyResponse> find(@PathVariable Long id,
                                                                         @RequestHeader(name = "If-None-Match", required = false) Optional<String> ifNoneMatch) {
        MyResponse response = service.findOne(id);
        String eTag = "\"" + response.getUpdateTime().toString() + "\"";

        if (ifNoneMatch.isPresent() && eTag.equals(ifNoneMatch.get())) {
            return ResponseEntity.status(HttpStatus.NOT_MODIFIED).build();
        }

        return ResponseEntity.ok().eTag(eTag).body(response);
    }

document.addEventListener('DOMContentLoaded', (event) => {
    fetchData(1);
    fetch("http://127.0.0.1:8080/api/208")
        .then(res => res.json())
        .then(body => console.log(body));
});

try

I tried debugging the request (which should have resulted in 304, but came out as 200). As a result, the application was clearly returning 304. But in chrome browser it shows as 200