当我设置HTTPS时，我是否还需要更改React的API端点地址？

Question

我使用 Express、React 和 Nginx 创建了一个项目，并将其部署为 Azure VM。

下面是一些在 React 中使用 Express API 的代码（IPv4 地址已被屏蔽）。

const response = await axios.get(`http://XX.XX.XXX.XXX/api/blog/posts/${postId}`,{withCredentials: true,});

我获得了一个域名并编写了 Nginx 文件，如下所示。

/etc/nginx/sites-available/default

server {
listen 80 default_server;
listen [::]:80 default_server;
root /var/www/html;
index index.html index.htm index.nginx-debian.html;
server_name XX.XX.XXX.XXX;

location / {
proxy_pass http://localhost:3001;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
proxy_connect_timeout 90;
proxy_send_timeout 90;
proxy_read_timeout 300;

}
}

/etc/nginx/sites-available/domain

server {
listen 80;
server_name example.com(my domain);

root /var/www/html;
index index.html index.htm index.nginx-debian.html;
location / {
proxy_pass http://localhost:3001;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}

HTTPS 将通过 certbot 获取证书来设置。

设置好 HTTPS 后，从 React 调用后端 API 时是否需要将所有端点修改为 https://[mydomain]？

事实上，我现在遇到一个问题：如果我使用 IPv4 地址访问网页并执行需要 API 调用的操作，则效果很好，但如果我使用域地址访问网页并执行相同的操作，它无法正常工作。我认为这可能与我的问题有关（因为我在 React 中使用的端点是用 IPv4 编写的）。

我尝试修改React中的端点，但是要修改的东西太多，所以我想先看看是否有其他方法可以做到这一点。

Answer 1

是的，当您设置 HTTPS 时，您将需要更新 React 应用程序的 API 端点以使用

https://

而不是

http://

。这很重要，因为您的网站将通过 HTTPS 提供服务，混合 HTTP 和 HTTPS 调用（也称为混合内容）可能会导致安全问题和浏览器警告或错误。

为了简化更新端点的过程，您可以按照以下步骤操作：

1. 使用环境变量： 将您的 API 端点存储在环境变量中。这使您可以轻松地在开发和生产环境之间切换，而无需更改代码。

   在您的 React 项目中，您可以在项目的根目录下创建一个

   .env

   文件：

   REACT_APP_API_URL=https://example.com/api
   

   然后，在代码中使用此变量：

   const response = await axios.get(`${process.env.REACT_APP_API_URL}/blog/posts/${postId}`, { withCredentials: true });
   

2. 更新 Nginx 配置： 确保您的 Nginx 配置能够正确处理 HTTPS。使用 Certbot 设置 SSL 证书后，您的 Nginx 配置应如下所示：

   server {
       listen 80;
       server_name example.com;
       return 301 https://$host$request_uri;
   }
   
   server {
       listen 443 ssl;
       server_name example.com;
   
       ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
       ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
   
       root /var/www/html;
       index index.html index.htm index.nginx-debian.html;
   
       location / {
           proxy_pass http://localhost:3001;
           proxy_http_version 1.1;
           proxy_set_header Upgrade $http_upgrade;
           proxy_set_header Connection 'upgrade';
           proxy_set_header Host $host;
           proxy_cache_bypass $http_upgrade;
       }
   }
   

   此配置强制将 HTTP 请求重定向到 HTTPS 并设置服务器以正确处理 HTTPS 请求。

3. 使用相对路径进行API调用： 如果您的 React 应用程序和 API 位于同一域，则可以使用相对路径进行 API 调用。这样，协议（HTTP 或 HTTPS）将自动匹配您网站使用的协议。

   const response = await axios.get(`/api/blog/posts/${postId}`, { withCredentials: true });
   

4. 测试您的设置： 进行这些更改后，部署您的应用程序并对其进行彻底测试，以确保所有 API 调用通过 HTTPS 正常工作。

通过使用环境变量和相对路径，您可以避免在 React 应用程序中硬编码 URL，从而更轻松地管理不同环境并确保 HTTP 和 HTTPS 之间的平滑过渡。