阿波罗GraphQL:如何设置安全Websockets?

4

我正在设置我的开发系统使用 https,但 Chrome 提示我的 WebSocket 不安全:

VM4965:161 混合内容:该页面在 'https://mywebsite.io/' 上加载了 HTTPS, 但尝试连接不安全的 WebSocket 端点 'ws://mywebsite.io:4000/subscriptions'。该请求已被阻止; 此端点必须可用于 WSS。

这是我当前基于 Apollo 文档的 WS 服务器端设置:

const localHostString = 'mywebsite.io'; 
const pubsub = new PubSub();

// additional context you use for your resolvers, if any
const context = {connectors: connectors};

//SET UP APOLLO QUERY / MUTATIONS / PUBSUB
//start a graphql server with Express handling a possible Meteor current user
createApolloServer({
    schema,
    context
});

const METEOR_PORT = 3000;
const GRAPHQL_PORT = 4000;
const server = express();

server.use('*', cors({ origin: `https://${localHostString}:${METEOR_PORT}` }));

server.use('/graphql', bodyParser.json(), graphqlExpress({
    schema,
    context
}));

server.use('/graphiql', graphiqlExpress({
    endpointURL: '/graphql',
    subscriptionsEndpoint: `ws://${localHostString}:${GRAPHQL_PORT}/subscriptions`
}));

// Wrap the Express server
const ws = createServer(server);
ws.listen(GRAPHQL_PORT, () => {
    console.log(`GraphQL Server is now running on http://${localHostString}:${GRAPHQL_PORT}`);
    console.log(`GraphiQL available at http://${localHostString}:${GRAPHQL_PORT}/graphiql`);
    // Set up the WebSocket for handling GraphQL subscriptions
    new SubscriptionServer({
        execute,
        subscribe,
        schema
    }, {
        server: ws,
        path: '/subscriptions',
    });
});

如何更新此内容以使用WSS而不是WS WebSockets?

提前感谢所有人提供的任何信息。


你在解决这个问题方面有什么进展了吗? - divramod
是的。当我解决它时,仅出于开发目的,我使用了ngrok。我为https和wss设置了单独的ngrok URL。Ngrok通过从我的本地开发系统提供数据来处理对这些安全URL的调用,该系统仍在http和ws上。然而,最近我尝试使用最新的服务器/客户端代码和最新的Apollo库进行操作时,在Firefox中出现错误,一些ngrok包无法加载。目前,我将我的应用程序放在Galaxy上。出于开发目的,使用https / wss,我可能需要在本地开发系统上安装SSL证书。 - VikR
1个回答

7
它看起来像是你正在做什么。
subscriptionsEndpoint: `ws://${localHostString}:${GRAPHQL_PORT}/subscriptions

也许可以改为将ws改为wss。例如:
subscriptionsEndpoint: `wss://${localHostString}:${GRAPHQL_PORT}/subscriptions

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接