WebSocket 与“ws://localhost:4000/graphql”的连接失败：

Question

我现在收到此Websocket 无法连接客户端和服务器端的错误（如下图所示）。 除了 apollo 客户端中指定的配置之外，我没有使用任何其他 Websocket 配置。 这让我困惑了大约 2 天。 任何帮助，将不胜感激。 如果您需要查看任何进一步的代码，请告诉我。

我有一个连接到graphql apollo 服务器的Vue 应用程序客户端。 下面给出了 apolloclient 配置的代码。

 // 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 }) => { const definition = getMainDefinition(query); return ( definition.kind === "OperationDefinition" && 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) => { // 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 }) => { 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"), } } } }; });

配置文件

const { defineConfig } = require("@vue/cli-service");
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
module.exports = defineConfig({
  pluginOptions: {
    apollo: {
      enableMocks: true,
      enableEngine: true,
    },
  },
  transpileDependencies: ["vuetify"],
  chainWebpack: (config) => {
    config.performance.maxEntrypointSize(400000).maxAssetSize(400000);
    new NodePolyfillPlugin();
  },
});

Answer 1

有趣的尝试 localhost 4004，它应该工作