I am new to react js and spring boot where implemented websocket using spring boot and try to subcribe th topics using react js. but on connecting i receiving "Access to XMLHttpRequest at 'http://localhost:8080/order/info?t=1644130287484' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource." this type of error message in chrome console
here is my code for react js
import logo from './logo.svg';
import './App.css';
import { useEffect, useState } from 'react';
import SockJsClient from 'react-stomp'
function App() {
const [message, setMessage] = useState(null);
useEffect(() => {
fetch("http://localhost:8080/Gradle/test")
.then(response => response.json())
.then(data => setMessage(data))
},[])
const handleMessage = (stompMessage) => {
setMessage(stompMessage)
}
return (
<div>
<SockJsClient
url={`http://localhost:8080/order`}
topics={['/topic/11211']}
onMessage={(message) => handleMessage(message)} />
{message
? `Latest message received: ${message}`
: "No message received yet"}
</div>
)
}
export default App;
code for spring boot
@Override
public void configureMessageBroker(MessageBrokerRegistry messageBrokerRegistry) {
messageBrokerRegistry.enableSimpleBroker("/topic");
messageBrokerRegistry.setApplicationDestinationPrefixes("/app");
}
@Override
public void registerStompEndpoints(StompEndpointRegistry stompEndpointRegistry) {
stompEndpointRegistry.addEndpoint("/order")
.setAllowedOrigins("*")
.withSockJS();
}
}
Thanks for advance for helping to me understand