react js + spring framework websocket

Viewed 116

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

0 Answers
Related