使用websocket的https后端运行Vue devServer代理

Question

我有一个运行https(用于websocket连接(的springboot服务器，配置如下：

application.properties

server.port: 9080
server.ssl.key-store: classpath:keystore.p12
server.ssl.key-store-password: XXXXXX
server.ssl.keyStoreType: PKCS12
server.ssl.keyAlias: XXXXXX

和web配置

@Slf4j
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
@Override
public void configureMessageBroker(MessageBrokerRegistry config) {
config.enableSimpleBroker("/topic", "/queue");
config.setApplicationDestinationPrefixes("/app");
}
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/greeting").setHandshakeHandler(new CustomHandshakeHandler())
.setAllowedOrigins("https://192.168.0.101:9000", "chrome-extension://ggnhohnkfcpcanfekomdkjffnfcjnjam").withSockJS();
}
}

UI是一个运行在9000端口上的vue-dev服务器，具有以下配置：

vue.config.js

var fs = require('fs');
module.exports = {
"devServer": {
"port": 9000,
"https": {
"key": fs.readFileSync('./certs/privkey.pem'),
"cert": fs.readFileSync('./certs/cert.pem')
},
"proxy": {
"/": {
"target": "https://192.168.0.101:9080",
"ws": true,
"secure": false,
"changeOrigin": true
}
},
"overlay": {
"warnings": true,
"errors": true
}
},
"transpileDependencies": [
"vuetify"
],
publicPath: "./"
}

certs文件夹与src文件夹处于同一级别，密钥和证书是使用以下步骤生成的：

1. 生成密钥库：

keytool -genkey -alias tomcat -storetype PKCS12 -keyalg RSA -keysize 2048 -keystore keystore.p12 -validity 3650

2. 从密钥库生成pem格式的证书

openssl pkcs12 -in keystore.p12  -nokeys -out cert.pem

3. 从密钥库生成pem格式的私钥：

openssl pkcs12 -in keystore.p12  -nodes -nocerts -out privkey.pem

在我的vue文件中，我正在使用创建新的连接

import SockJS from "sockjs-client";
import Stomp from "webstomp-client";
...
var socket = new SockJS("/greeting");
this.ws = Stomp.over(socket);
...
this.ws.send("/app/message", JSON.stringify({"id":12, "name":"dev"}), {});

我的问题是，即使在前端和后端添加了https的配置后，我在UI端上也得到了net:：ERR_CONNECTION_REFUSED

Answer 1

我犯的错误是，在setAllowedOrigins((中的web配置中，我仍然使用http而不是https作为ui dev服务器的url。

我知道这不是一个问题，但希望所有这些步骤都能帮助