如何为基于 NextJS 的应用程序配置 TLS @improbable-eng/grpc-web？

Question

我正在使用 NextJS 构建我的 Web 应用程序，使用 https://github.com/improbable-eng/grpc-web 在后端和前端之间进行通信。 以下 React 元素使用grpc.invoke 与 GRPC 后端服务进行通信：

export default function Index({user}: OverviewProps) {

    useEffect(() => {
        grpc.invoke(RepoService.ListRepos, {
            host: "http://localhost:9000",
            request: listReq,
            onMessage: (msg) => {
                console.log(msg);
            },
            onEnd:(code:grpc.Code,msg:string | undefined | number, trailers: grpc.Metadata)=>{
                console.log(code);
                if(code == grpc.Code.OK){
                    console.log("Worked")
                }else{
                    console.log("Not Working")
                }
            },
            debug: true

        })

    }, [])

    return wrapWithLayout(
        <p>Hi {user.nickname}</p>
    );
}

后端服务受 TLS 保护。在客户端，我必须以某种方式将证书加载到客户端中。问题是，如何将证书加载到客户端才能与后端服务通信？

Answer 1

在浏览器客户端中，必须在浏览器级别配置任何 TLS 选项，因为我们无法像您在其他平台上那样访问底层网络。这实质上意味着您需要使用公开可接受的证书（例如 Let's Encrypt 或直接从 CA 购买的证书）配置您的服务器。

Source