Я хочу использовать WebSocket между моим внешним интерфейсом (ReactJs, приложение на основе create-response-app, работающим на localhost: 3000) и моим внутренним сервером (Spring Boot Applicationn, работающим на localhost: 8080).
Я следовал этим инструкциям , чтобы настроить все это.
У меня возникает следующая проблема, когда SockJsClient пытается установить соединение
"Доступ кXMLHttpRequest в «http://localhost:8080/ws/info?t=1572543116103' от источника» http://localhost:3000' заблокирован политикой CORS: в запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin». "
На сервере у меня есть следующие журналы:
osweb.servlet.DispatcherServlet: GET "/ ws / info? T = 1572543948465", параметры = {masked}
oswsssWebSocketHandlerMapping: сопоставлено с org.springframework.web.socket.sockjs.support.SockJsHttpRequestHandler@1af7f54a
oswssthDefaultSockJsService: обработка запроса на передачу: 10-й слет 10: * * * * * * * * * * * * * * * *. ompleted 200 OK
Я разрешил все источники для моего StompEndPoint, см. код ниже. (У меня был код HTTP 403 до этой модификации)
Я также пытаюсь:
Код
Сторона сервера:
WebSocketConfig. java
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/ws").setAllowedOrigins("*").withSockJS();
}
@Override
public void configureMessageBroker(MessageBrokerRegistry brokerRegistry) {
brokerRegistry.setApplicationDestinationPrefixes("/app");
brokerRegistry.enableSimpleBroker("/topic", "/queue");
}
}
pom.xml
...
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.2.0.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
...
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
...
Лицевая сторона:
App.js
import React, { Component } from 'react';
import SockJsClient from 'react-stomp';
import './App.css';
class App extends Component {
handleEvents = (event) => {
console.log("event:" + event);
}
handleConnection = () => {
console.log("WS connection succeed");
}
handleConnectionFailure = (error) => {
console.error("WS connection failure:" + error);
}
handleDisconnect = () => {
console.error("WS disconnected");
}
render () {
return (
<div className="full-screen">
<SockJsClient
url={'http://localhost:8080/ws'}
topics={['/topic/events']}
onMessage={this.handleEvents}
ref={ (client) => { this.clientRef = client }}
onConnect={this.handleConnection}
onConnectFailure={this.handleConnectionFailure}
onDisconnect={this.handleDisconnect}
debug={true}
/>
</div>
);
}
}
export default App;
Мне кажется, что я прочиталИнтернет.
Кто-то знал, почему CORS, кажется, не очень хорошо настроен в моем весеннем приложении?