SocketIO VUe 应用程序无法连接到后端获取状态 4​​00

如何解决SocketIO VUe 应用程序无法连接到后端获取状态 4​​00

我有一个使用 Socket.IO 的 Vue.js 应用程序，并且能够在本地运行它，但不能在带有 S3 和公共套接字服务器的生产设置中运行。 Vue.js dist/ build 在 AWS S3 上以公共网站格式设置。我有 Cloudflare 为 S3 存储桶提供的 DNS 和 SSL。

我的 socket.io 服务器在使用 KOPS 在 AWS 上创建的 Kubernetes 集群中运行。我在它前面有一个网络负载均衡器，入口是 nginx-ingress。我添加了一些注释，因为我一直在调试这些注释，这些注释位于下面注释部分的底部。

错误信息：

WebSocket connection to '<URL>' Failed: WebSocket is closed before the connection is established.

问题：我试图让我的前端连接到 socket.io 服务器以来回发送消息。但是，由于上述错误消息，我不能。我正在寻找导致此错误消息的错误。

ingress.yaml

apiVersion: networking.k8s.io/v1beta1
kind: Ingress
Metadata:
  annotations:
    # add an annotation indicating the issuer to use.
    kubernetes.io/ingress.class: "Nginx"
    cert-manager.io/cluster-issuer: "letsencrypt"
    # needed to allow the front end to talk to the back end
    Nginx.ingress.kubernetes.io/cors-allow-origin: "https://app.domain.ca"
    Nginx.ingress.kubernetes.io/cors-allow-credentials: "true"
    Nginx.ingress.kubernetes.io/enable-cors: "true"
    Nginx.ingress.kubernetes.io/cors-allow-methods: "GET,PUT,POST,DELETE,PATCH,OPTIONS"
    # needed for monitoring - maybe
    prometheus.io/scrape: "true"
    prometheus.io/port: "10254"
    #for Nginx ingress controller
    ad.datadoghq.com/nginx-ingress-controller.check_names: '["Nginx","Nginx_ingress_controller"]'
    ad.datadoghq.com/nginx-ingress-controller.init_configs: '[{},{}]'
    ad.datadoghq.com/nginx-ingress-controller.instances: '[{"Nginx_status_url": "http://%%host%%:18080/Nginx_status"},{"prometheus_url": "http://%%host%%:10254/metrics"}]'
    ad.datadoghq.com/nginx-ingress-controller.logs: '[{"service": "controller","source":"nginx-ingress-controller"}]'
    # Allow websockets to work
    Nginx.ingress.kubernetes.io/websocket-services: socketio
    Nginx.org/websocket-services: socketio
    Nginx.ingress.kubernetes.io/proxy-read-timeout: "3600"
    Nginx.ingress.kubernetes.io/proxy-send-timeout: "3600"
  name: socketio-ingress
  namespace: domain
spec:
  rules:
  - host: socket.domain.ca
    http:
      paths:
      - backend:
          serviceName: socketio
          servicePort: 9000
        path: /
  tls:
  - hosts:
    - socket.domain.ca
    secretName: socket-ingress-cert 

server.js 的 socket io 部分

const server = http.createServer();
const io = require("socket.io")(server,{
  cors: {
    origin: config.CORS_SOCKET,// confirmed this is -- https://app.domain.ca -- via a console.log
  },adapter: require("socket.io-redis")({
    pubClient: redisClient,subClient: redisClient.duplicate(),}),});

vue.js 主程序

const socket = io(process.env.VUE_APP_SOCKET_URL)

Vue.use(new VueSocketIO({
  debug: true,connection: socket,vuex: {
    store,actionPrefix: "SOCKET_",mutationPrefix: "SOCKET_"
  }
})
);