SseEmitter request is pending forever

My frontend is Vue.js.
The following js code is put in the setup. (My question has nothing to do with Vue.js, you can think of setup as a place where the js code runs)

    let eventSource = new EventSource(
        "http://127.0.0.1:8080/sse/connect");

My backend code (SpringBoot application running on localhost:8080)
This is the controller.

@Controller
@RequestMapping("/sse")
public class SseEmitterController {
    SseEmitterServer sseEmitterServer;

    @Autowired
    public void setSseEmitterServer(SseEmitterServer sseEmitterServer) {
        this.sseEmitterServer = sseEmitterServer;
    }

    @GetMapping("/connect")
    public SseEmitter connect() {
        return sseEmitterServer.connect(1L);//1L is userId, for testing, I set it to 1L
    }
}

SseEmitterServer:

@Service
public class SseEmitterServer {

    private   Map<Long, SseEmitter> sseEmitterMap = new ConcurrentHashMap<>();

    public   SseEmitter connect(Long userId) {
        SseEmitter sseEmitter = new SseEmitter(0L);
        sseEmitter.onCompletion(completionCallBack(userId));
        sseEmitter.onError(errorCallBack(userId));
        sseEmitter.onTimeout(timeoutCallBack(userId));
        sseEmitterMap.put(userId, sseEmitter);
        return sseEmitter;
    }
}

However, the request to get a SseEmitter is forever pending.

I wonder what is wrong with my code. I am using Chrome with SSE support.
enter image description here

request detail, it has no response:

enter image description here