如何在react-boilerplate中配置HTTPS？本地HTTPS访问内容加载失败

Hey there, let’s work through why your https://localhost/voos/ path isn’t loading content even though your HTTP setup works and you’ve configured Nginx for HTTPS. I’ve tackled similar react-boilerplate proxy issues before, so here are the most likely fixes to try:

1. Double-Check Your Nginx Proxy Configuration #

First, make sure your Nginx config is properly forwarding HTTPS traffic to your react-boilerplate dev server (running on port 3000). Misconfigured proxies often cause routing or protocol mismatches.

• In your Nginx config’s location /voos/ block, confirm it points to http://localhost:3000/voos/ (or the correct root path for your app).
• Add these headers to help your React app recognize it’s behind an HTTPS proxy:

  proxy_set_header X-Forwarded-Proto $scheme;
  proxy_set_header X-Forwarded-For $remote_addr;
  proxy_set_header Host $host;
  

• Also verify your SSL certificate and key paths are correct and valid for localhost—invalid certs can trigger silent resource blocks.

2. Fix Mixed Content Errors #

Browsers block pages that load some resources over HTTP when accessed via HTTPS, which is a super common culprit here.

• Open your browser’s DevTools (Console tab) and look for "mixed content" warnings—these will highlight assets or API calls still using http:// instead of https://.
• In your react-boilerplate code, switch to relative paths for assets and API calls (like /api/get-data instead of http://localhost:3000/api/get-data) or use window.location.protocol to dynamically set the protocol.

3. Enable HTTPS for Your Dev Server #

Even with Nginx handling HTTPS, your react-boilerplate dev server might need to know it’s serving over HTTPS to generate correct URLs.

• Start the dev server with HTTPS enabled using this command:

  HTTPS=true npm run start
  

• Alternatively, update your Webpack dev server config to set https: true—this ensures the server serves content over HTTPS, avoiding protocol mismatches when Nginx proxies to it.

4. Verify React Router Setup #

Since you’re accessing a subpath (/voos/), make sure your React Router is configured to handle this correctly behind a proxy.

• If your app is served from /voos, set the basename prop on your BrowserRouter:

  <BrowserRouter basename="/voos">
    {/* Your route definitions here */}
  </BrowserRouter>
  

• Double-check that your route paths match /voos/ exactly (or use wildcard routes if needed) so the router can locate the correct component.

5. Rule Out Caching Issues #

Cached HTTP resources or cookies can interfere with HTTPS loading. Try clearing your browser cache, or test the page in an incognito window to eliminate this variable.

Final Steps to Apply Changes #

After tweaking these settings:

• Restart Nginx to apply config updates (use sudo systemctl restart nginx on Linux, or the appropriate command for your OS)
• Stop and restart your react-boilerplate dev server
• Load https://localhost/voos/ again and check the DevTools Console for any remaining errors

内容的提问来源于stack exchange，提问作者Diego Oliveira