vue.runtime.esm.js:1887 InvalidStateError: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state.

`InvalidStateError: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state.` 这是一个JavaScript运行时错误，发生在Vue.js（通过其WebSocket组件）尝试向WebSocket发送数据时，但WebSocket的状态仍处在"CONNECTING"阶段，也就是连接尚未建立完成。WebSocket在连接过程中是不允许发送数据的。

解决这个问题的一般步骤包括：

1. 确认`new WebSocket()`创建的连接已经成功打开。可以添加一个`open`事件监听器来等待连接状态变为`OPEN`：

   const socket = new WebSocket('your-url');
   socket.addEventListener('open', function () {
     socket.send(yourData);
   });

2. 检查`send`之前是否有错误发生，如延迟网络连接导致的超时问题。

3. 如果在循环或异步操作中使用WebSocket，确保在循环结束或回调完成后才尝试发送数据。

4. 对于长连接，确保`send`操作是在连接稳定后进行。

如果上述都确认无误，这可能是代码逻辑中的一个意外情况，需要进一步调试找出原因。

相关问题

Access to fetch at 'http://localhost:9091/user/page?pageNum=2&pageSize=3' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. :9091/user/page?pageNum=2&pageSize=3:1 Failed to load resource: net::ERR_FAILED HomeView.vue:145 Uncaught (in promise) TypeError: Failed to fetch at VueComponent.created (HomeView.vue:145:1) at invokeWithErrorHandling (vue.runtime.esm.js:3017:1) at callHook$1 (vue.runtime.esm.js:4031:1) at Vue._init (vue.runtime.esm.js:5693:1) at new VueComponent (vue.runtime.esm.js:5826:1) at createComponentInstanceForVnode (vue.runtime.esm.js:4544:1) at init (vue.runtime.esm.js:4406:1) at merged (vue.runtime.esm.js:4561:1) at createComponent (vue.runtime.esm.js:6567:1) at createElm (vue.runtime.esm.js:6521:1)

这个错误是由于浏览器的同源策略（Same-Origin Policy）导致的。同源策略要求网页只能请求同源（协议、域名、端口号都相同）的资源，否则会出现跨域错误。

根据错误信息，你的前端页面正在通过fetch方法请求一个位于'http://localhost:9091'的资源，但是该资源的响应头中没有包含'Access-Control-Allow-Origin'字段，因此浏览器会拒绝这个请求。

要解决这个问题，你需要在后端服务器的响应头中添加'Access-Control-Allow-Origin'字段，并设置为允许访问的域名，例如设置为'*'表示允许所有域名访问。你可以在后端代码中添加以下代码：

response.setHeader('Access-Control-Allow-Origin', '*');

另外，如果请求中包含自定义的请求头字段，如'Authorization'，你还需要在响应头中添加'Access-Control-Allow-Headers'字段，并指定允许的请求头字段。例如：

response.setHeader('Access-Control-Allow-Headers', 'Authorization');

这样设置后，浏览器就会允许从'http://localhost:8080'发起对'http://localhost:9091'的请求了。

请注意，在生产环境中，应该将允许访问的域名限制为实际需要的域名，而不是使用通配符'*'。这样可以增加安全性。

index.vue:948 Failed to execute API code SyntaxError: Unexpected token '<' at VueComponent.executeApiCode (index.vue:945:1) at VueComponent.eval (index.vue:931:1) at Array.eval (vue.runtime.esm.js:3143:1) at flushCallbacks (vue.runtime.esm.js:3065:1)

这个错误提示是在Vue组件中调用API代码时遇到了语法错误，错误信息中的“Unexpected token '<'”表示在代码中出现了不应该出现的“<”符号。可能是因为在调用API时出现了请求错误，从而导致返回了错误的HTML页面而不是正确的API响应。建议检查API请求的地址是否正确，以及API响应是否符合预期。