在 React 中通过 axios 调用 API（使用自签名证书）时出现 CORS 问题

Posted 2023-02-22

【中文标题】在 React 中通过 axios 调用 API（使用自签名证书）时出现 CORS 问题

【英文标题】：CORS issue when calling API (with a self-signed certificate) via axios in React

【发布时间】：2019-05-01 05:09:19

【问题描述】：

我的 React Web 应用程序托管在 AWS 上的一个集群 https://example1.com 中，我正在尝试通过 React 中的 axios 调用我的 API，该 API 托管在另一个集群 https://example2.com/api/login 上，并且目前正在使用自签名证书.我想测试一切是否都适用于 HTTPS。 API 是用 Java 编写的，并设置了 Access-Control-Allow-Origin: * 标头。调用 API 时出现 CORS 错误。

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://example2.com/api/login. (Reason: CORS request did not succeed).

当我在 https://localhost 上测试我的 React 应用程序时它也不起作用。

我的 React Web 应用程序是使用 webpack 捆绑的。对于本地开发，我使用 webpack-dev-server，而对于生产构建，Node.js 服务器仅用于为页面提供服务。 Node.js 服务器不是 HTTPS。 https://example1.com 上的 Node.js 服务器通过自定义端口上的 Docker 部署用于生产构建。

Eventbrite、Meetup、Google Places 和 Google Books 等其他外部 API 工作正常。

我是否需要在 React / Node.js 中进行任何特殊配置才能使其正常工作？

cURL 在运行curl -X POST https://example2.com/api/login 时也会出现以下错误

curl: (60) Peer's certificate issuer has been marked as not trusted by the user.
More details here: http://curl.haxx.se/docs/sslcerts.html

curl performs SSL certificate verification by default, using a "bundle" of Certificate Authority (CA) public keys (CA certs). If the default bundle file isn't adequate, you can specify an alternate file using the --cacert option.
If this HTTPS server uses a certificate signed by a CA represented in the bundle, the certificate verification probably failed due to a problem with the certificate (it might be expired, or the name might not match the domain name in the URL).
If you'd like to turn off curl's verification of the certificate, use the -k (or --insecure) option.

运行curl -X POST https://example2.com/api/login -k 有效。

同样，在 Postman 中，我只能在关闭 SSL 验证时让 API 工作。

注意：当所有主机都在 HTTP 上时，一切正常。

【问题讨论】：

尝试在几个不同的浏览器中直接打开 URL，看看会发生什么。听起来 axios 请求失败的原因与您尝试使用 curl（没有 -k 开关）时失败的原因相同。我认为在这种情况下，浏览器会在控制台中为此记录 SSL 错误，但可能不会。

当我在任何浏览器中打开 API URL 时，我会得到 Your connection is not secure 页面，需要将页面添加为异常才能继续。

目前尚不清楚您是否正在寻找可以暂时仅用于本地开发的解决方案，或者您是否说问题是在您部署到生产环境后仍然存在的问题。如果只是为了本地开发而暂时需要它，我想你可以尝试在禁用安全性的情况下启动浏览器——尽管我不确定是否会导致浏览器允许不安全的 SSL/TLS。但无论如何，如果您尝试使用自签名证书向生产中的用户提供内容，那么就没有解决方案。或者更确切地说，解决方案是不这样做。

仅用于测试。对于生产，将有一个受信任的证书。

我尝试在类似于此处建议的 HTTPS 代理中使用 rejectUnauthorized 选项：github.com/axios/axios/issues/535。我不确定这是否适用于 React。

【参考方案1】：

因此浏览器会阻止对可疑服务器的请求。

解决方法可能是在https://example1.com 上运行服务器，这只会将/api/login 之类的请求重定向到https://example2.com，而忽略证书的错误。

但最好获得受信任的证书。