Vue.js 获取 axios 请求时出现 ERR_CERT_AUTHORITY_INVALID 错误

在本文中，我们将介绍使用 Vue.js 进行 axios 请求时遇到 ERR_CERT_AUTHORITY_INVALID 错误的原因和解决方法。

什么是 ERR_CERT_AUTHORITY_INVALID 错误？

ERR_CERT_AUTHORITY_INVALID 错误通常在浏览器中出现，它表示 SSL 证书的签名机构无效。在使用 axios 发送请求时，如果遇到这个错误，可能是因为服务器证书无效或过期，浏览器无法确认其可信度。

解决 ERR_CERT_AUTHORITY_INVALID 错误的方法

1. 绕过证书验证

在开发阶段，我们可以绕过证书验证来解决 ERR_CERT_AUTHORITY_INVALID 错误。这种方法可行，但不推荐在生产环境中使用。以下是使用 axios 绕过证书验证的示例代码：

const axios = require('axios');
const https = require('https');

const agent = new https.Agent({
  rejectUnauthorized: false
});

axios.get('https://example.com', { httpsAgent: agent })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

在上面的示例中，我们使用了 Node.js 中的 https 模块，创建了一个 agent 对象并设置 rejectUnauthorized 为 false。然后，我们将该 agent 对象作为 httpsAgent 选项传递给 axios 请求。

2. 更新证书

如果我们遇到 ERR_CERT_AUTHORITY_INVALID 错误，可能是服务器的证书已经过期或无效。在这种情况下，我们需要更新服务器的证书。我们可以联系服务器管理员或证书颁发机构来获取新的证书。

3. 忽略无效证书

有时，我们知道服务器证书无效，但仍然希望继续访问它。我们可以在浏览器设置中忽略无效证书。以下是在 Chrome 浏览器中忽略无效证书的步骤：

在地址栏中输入 chrome://flags/#allow-insecure-localhost 并按 Enter 键。
在打开的设置页面中，找到 “Allow invalid certificates for resources loaded from localhost” 选项，并将其设置为 “Enabled”。
重新启动 Chrome 浏览器。

请注意，忽略无效证书可能会导致安全风险，仅在开发或测试环境中使用该方法。