<p>我现在在客户端和服务器端都收到此 <em>Websocket 无法连接</em> 错误（如下图所示）。除了 apollo 客户端中指定的配置之外，我没有使用任何其他 Websocket 配置。这让我困惑了大约两天。任何帮助，将不胜感激。如果您需要查看任何进一步的代码，请告诉我。</p> <p>我有一个连接到 <strong>graphql apollo 服务器</strong>的 <strong>Vue 应用客户端</strong>。下面给出apolloclient配置的代码。</p> <p> <pre class="snippet-code-js lang-js prettyprint-override"><code>// Apollo packages import { ApolloClient } from "apollo-boost-upload"; import { WebSocketLink } from "apollo-link-ws"; import { HttpLink } from "apollo-link-http"; import { InMemoryCache } from "apollo-cache-inmemory"; import { split } from "apollo-link"; import { getMainDefinition } from "apollo-utilities"; import VueApollo from "vue-apollo"; Vue.use(VueApollo); wsLink = new WebSocketLink({ uri: "ws://localhost:4000/graphql", // use wss for a secure endpoint options: { reconnect: true, }, }); const link = split( // split based on operation type ({ query }) =&gt; { const definition = getMainDefinition(query); return ( definition.kind === "OperationDefinition" &amp;&amp; definition.operation === "subscription" ); }, wsLink, httpLink ); // Cache implementation export const defaultClient = new ApolloClient({ // uri: "http://localhost:4000/graphql", link, cache: new InMemoryCache(), fetchOptions: { credentials: "include", }, request: (operation) =&gt; { // if no token in local storage, add it if (!localStorage.anaceptToken) { localStorage.setItem("anaceptToken", ""); } // operation adds the token to authorizatrion header, which is sent o backend operation.setContext({ headers: { authorization: "Bearer " + localStorage.getItem("anaceptToken"), }, }); }, onError: ({ graphQLErrors, networkError }) =&gt; { if (networkError) { console.log("[networkError]", networkError); } if (graphQLErrors) { for (const error of graphQLErrors) { console.dir(error); console.log(error); if ( error.name === "AuthenticationError" || error.message === "jwt expired" ) { // set auth error in state store.commit("setError", error); // signout user to clear error store.dispatch("signUserOut"); } } } }, });</code></pre> </p> <p>vue 配置文件</p> <pre class="brush:php;toolbar:false;">const { defineConfig } = require(&quot;@vue/cli-service&quot;); const NodePolyfillPlugin = require(&quot;node-polyfill-webpack-plugin&quot;); module.exports = defineConfig({ pluginOptions: { apollo: { enableMocks: true, enableEngine: true, }, }, transpileDependencies: [&quot;vuetify&quot;], chainWebpack: (config) =&gt; { config.performance.maxEntrypointSize(400000).maxAssetSize(400000); new NodePolyfillPlugin(); }, });</pre>