vue生产环境 websocket 跨域

在Vue生产环境中，如果使用WebSocket遇到跨域问题，需要在后端服务器中做出相应的配置来允许WebSocket跨域请求。

下面以Nginx服务器为例，介绍如何进行WebSocket跨域配置：

1. 打开Nginx配置文件，添加以下配置：

location / {
  # 允许WebSocket跨域请求
  add_header 'Access-Control-Allow-Origin' '*' always;
  add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
  add_header 'Access-Control-Allow-Headers' 'Origin, Authorization, Accept' always;
  add_header 'Access-Control-Allow-Credentials' 'true' always;

  proxy_pass http://your_backend_server;
  # WebSocket代理配置
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "upgrade";
}

其中，`your_backend_server`是你的后端服务器地址，需要替换为实际值。

2. 重启Nginx服务，使配置生效。

配置完成后，在Vue生产环境中使用WebSocket时，就可以跨域访问后端服务器了。在Vue中创建WebSocket对象时，需要指定正确的WebSocket地址，例如：

const ws = new WebSocket('ws://your_backend_server/ws');

其中，`your_backend_server`是你的后端服务器地址，需要替换为实际值。`/ws`是WebSocket服务的路径，需要根据实际情况进行配置。