Question

我想在前端（ReactJs，基于create-react-app的应用程序，在localhost：3000上运行）和后端（Spring Boot Applicationn，在localhost：8080上运行）之间使用WebSocket。

我跟随these instructions来设置整个东西。

SockJsClient尝试建立连接时出现以下问题

“访问XMLHttpRequest在原产地的“ http://localhost:8080/ws/info?t=1572543116103” “ http://localhost:3000”已被CORS政策禁止：否请求中存在“ Access-Control-Allow-Origin”标头资源。”

在服务器上，我有以下日志：

o.s.web.servlet.DispatcherServlet：GET“ / ws / info？t = 1572543948465”，参数= {masked}

o.s.w.s.s.s.WebSocketHandlerMapping：映射到org.springframework.web.socket.sockjs.support.SockJsHttpRequestHandler@1af7f54a

o.s.w.s.s.t.h.DefaultSockJsService：处理传输请求：GET http://localhost:8080/ws/info?t=1572543948465

o.s.web.servlet.DispatcherServlet：已完成200 OK

我允许StompEndPoint的所有来源，请参见下面的代码。（此修改之前，我有403 HTTP代码）

我也尝试：

仅允许http://localhost:3000/
创建一个WebConfig类以配置CORS（chapter 3）

代码

服务器端：

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;

我觉得我已经读过互联网。

有人知道为什么我的Spring应用程序中的CORS似乎配置不正确吗？

春季Websocket从源“ http：// localhost：3000”访问“ http：// localhost：8080 / ws / info”处的XMLHttpRequest已被CORS策略错误

0 个答案: