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

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

我正在使用 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 进行保护。在客户端，我必须以某种方式将证书加载到客户端。问题是，如何将证书加载到客户端，以便与后端服务通信？

解决方法

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

Source