reactjs axios绕过TLS证书错误,前端(React)没有任何解决方案

6tqwzwtp 于 2022-12-29 发布在 React

关注(0)|答案(1)|浏览(257)

[编辑]：下面有一个答案

尝试使用axios（of fetch）从react调用我的节点https后端......自签名证书总是遇到错误。可以通过在启动react应用程序时设置NODE_TLS_REJECT_UNAUTHORIZED=0来“绕过”REJECT_UNAUTORIZED错误，但这显然不是解决方案。我还遇到了不同的消息，如ERR_CERT_COMMON_NAME_INVALID。
值得一提的是，当使用postman时，当激活证书验证并在postman中上传我的自签名CA PEM证书时，一切都运行良好。我试图在chrome中做同样的事情（在根CA商店中上传自签名CA PEM证书），但没有运气。仍然是警告...
当然，我尝试了添加https代理的解决方案（请参见下面的代码），但这也没有解决问题。该解决方案似乎适用于节点应用程序，但不适用于React或任何其他语言的前端应用程序。
那么解决方案是什么呢？我们怎样才能从react请求一个本地自签名的https后端服务器而不发出这些警告呢？这里或axios github中报告了数百万个类似的问题，但仍然没有可行的解决方案？
谢谢

axios.defaults.httpsAgent = new https.Agent({
    rejectUnauthorized: false,
    port: 443,
  });

const tokensData = await axios.post<TLoginApi, AxiosResponse<TLoginApi, any>, TLoginDTO>(
    `${process.env.AUTH_URL}/login`,
    credentials,
    {
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      // or this but failed anyway httpsAgent: new https.Agent({
                                                  rejectUnauthorized: false,
                                                  port: 443,
                                                }),
    }
  );

reactjs

来源：https://stackoverflow.com/questions/74932346/axios-bypass-tls-certificates-error-no-solution-at-all-for-front-end-react

1条答案

按热度按时间

w41d8nur1#

回答我自己的问题。为了避免使用NODE_TLS_REJECT_UNAUTHORIZED=0，你需要创建你的自签名证书。我所面临的主要问题与本地主机和谷歌 chrome 有关（至少版本108），因为我的测试后端是在同一台开发机器上。我想出了一个解决方案来生成自签名证书，这对域为“localhost”的Google Chrome浏览器来说是可以的。您需要添加一个扩展文件，添加一些DNS和“localhost”的IP地址（IP 4 & IP 6）。同样重要的是在Chrome中导入您的根CA，以避免拒绝未经授权的...

创建CA和证书的步骤

1- generate your root CA. It has to be imported in Google Chrome
openssl req -x509 -newkey rsa:4096 -days 999 -keyout ca-key.pem -out ca-cert.pem -subj "/C=US/ST=Oregon/L=City/O=whatevev/OU=whatevev/CN=your name if you want/emailAddress=test@test.com"

2- generate the server private key and CSR
openssl req -newkey rsa:4096 -keyout server-key.pem -out server-req.pem -subj "/C=US/ST=Oregon/L=City/O=whatevev/OU=whatevev/CN=your name if you want/emailAddress=test@test.com"

3- finaly generate the server key, with some additional conf (see below)
openssl x509 -req  -days 999 -in server-req.pem -CA ca-cert.pem -CAkey ca-key.pem -CAcreateserial -out server-cert.pem -extfile server-ext.conf

server-ext.conf文件示例，该文件可防止Chrome抱怨DNS错误或任何其他情况

我可以找到更多关于这个扩展文件HERE的信息

subjectAltName=DNS:test.home,DNS:localhost.home,DNS:localhost,IP:0.0.0.0,IP:127.0.0.1,IP:::1

最后，在BACKEND上，您可以使用根CA和证书/密钥配置nodejs Express服务器：

const httpsOptions: https.ServerOptions = {
    key: fs.readFileSync(
      path.join(__dirname, "auth", "certificats", "server-key.pem")
    ),

    cert: fs.readFileSync(
      path.join(__dirname, "auth", "certificats", "server-cert.pem")
    ),

    ca: fs.readFileSync(
      path.join(__dirname, "auth", "certificats", "ca-cert.pem")
    ),

    passphrase: "passpahrase of root CA,
  };

赞(0）回复(0）举报 2022-12-29

我来回答

reactjs axios绕过TLS证书错误,前端(React)没有任何解决方案

1条答案

相关问题

热门标签

最新问答