混合内容。通过 HTTPS 加载，但请求了不安全的 XMLHttpRequest 端点

Question

我面临一个无法解决的问题。我使用 React 前端和 Node.js API 构建了一个应用程序。我在 EC2 实例上部署了 API 并连接了所有内容。但是，它仅在我在本地主机上使用前端时才有效。当我将 Netlify 与 React 结合使用时，出现以下错误：

index-3ecf22b0.js:121 Mixed Content: The page at 'https://fanciful-khapse-1438af.netlify.app/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://15.229.71.122:7070/sessions'. This request has been blocked; the content must be served over HTTPS.

我尝试了一些在互联网上找到的解决方案，例如将以下内容添加到我的index.html中：

<meta
  http-equiv="Content-Security-Policy"
  content="upgrade-insecure-requests"
/>

但是，这并没有解决问题。我认为问题（如错误所示）是 API 采用 HTTP，而网站采用 HTTPS。我尝试的一件事是将 services/api.js 文件夹中的 baseURL 更改为 HTTPS，但它不起作用并导致错误 GET https://main--fanciful-khapse-1438af.netlify.app /vite.svg 404（未找到）。因此，我认为它应该与使用 HTTP 的 API 一起使用。

奔跑

要运行代码，请从 GitHub 克隆它并在前端文件夹中打开的终端中运行 npm install。现在，只需执行 npm run dev 即可启动应用程序。应该可以正常工作；但是，打开 Netlify 链接时，会出现错误。

GitHub：https://github.com/nesdark/products-inventory-front/blob/main/src/services/api.js

Netlify：https://main--fanciful-khapse-1438af.netlify.app/

Answer 1

浏览器请求的资源必须托管在同一域上并使用相同的协议。这是浏览器的两项安全措施。您可以通过在请求资源的服务器中设置 CORS 来禁用同一域。另一个不能用这个来修复。

当您的网站是 https 时，通过 http 加载的资源总是会被阻止。您让您的用户知道您的网站使用加密，而您可能会在未加密的情况下处理该人的数据。

您的解决方法是使用 https 设置资源。有时您可以将资源定义为

//example.com

。只需删除

http:

或

https:

。这样它将始终使用与您的网站当前运行相同的协议。然而浏览器正在转向强制 https