MERN栈Web应用移动端加载失败（混合内容问题）求助

Hey there, let's work through fixing this mixed content error that's causing your React app to show a white screen on Samsung mobile browsers. The error messages you shared clearly point to the problem: your HTTPS-hosted page is trying to load CSS and JS resources over HTTP, which modern browsers (especially mobile ones) block for security reasons.

Understanding the Root Cause #

Mixed content occurs when a secure HTTPS page requests insecure HTTP resources. Browsers block these requests to protect users from potential security risks, and this is exactly why your app works on desktop (maybe your desktop browser has more lenient temporary permissions) but fails on mobile.

Locating What Needs to Be Fixed #

You'll need to check three key areas in your MERN stack setup:

• React frontend resource references: Static asset paths in your public HTML and build configuration
• Build output: The generated paths in your production build files
• Deployment/server configuration: Ensuring your server serves all content over HTTPS

Step-by-Step Fixes #

1. Update React Frontend Resource Paths #

First, let's make sure your React app generates correct HTTPS-compatible paths:

• Open your public/index.html file. Look for any hardcoded http://www.javascriptmazes.com links (like the stylesheet and script tags mentioned in the error). Replace these with either:
  • Relative paths (e.g., /static/css/main.1e4202c6.css instead of the full HTTP URL) — this is the most flexible option, as it works with both HTTP and HTTPS.
  • Full HTTPS URLs (e.g., https://www.javascriptmazes.com/static/css/main.1e4202c6.css).
• Add or update the homepage field in your package.json file. Set it to either:
  • "homepage": "https://www.javascriptmazes.com" (explicit HTTPS root)
  • "homepage": "/" (root relative path, great if you might deploy to different environments)

2. Rebuild and Verify the React App #

After updating the paths:

• Run npm run build to generate a new production build.
• Open the build/index.html file and double-check that all CSS and JS resource paths are either relative or use HTTPS — no more http:// references should be present.

3. Configure Your Server to Enforce HTTPS #

If you're using Express as your backend or a reverse proxy like Nginx, you need to ensure all traffic is routed over HTTPS:

For Nginx (common in production):

Add a server block to redirect HTTP traffic to HTTPS, and serve your React build files securely:

# Redirect HTTP to HTTPS
server {
    listen 80;
    server_name www.javascriptmazes.com;
    return 301 https://$host$request_uri;
}

# Serve app over HTTPS
server {
    listen 443 ssl;
    server_name www.javascriptmazes.com;

    # Path to your SSL certificate files
    ssl_certificate /path/to/your/ssl/cert.pem;
    ssl_certificate_key /path/to/your/ssl/privkey.pem;

    # Serve React static files
    location / {
        root /path/to/your/react/build/directory;
        try_files $uri $uri/ /index.html;
    }

    # Cache static assets for better performance
    location /static/ {
        root /path/to/your/react/build/directory;
        expires 30d;
    }
}

For Express Backend:

If you're serving the React build directly from Express, configure HTTPS (note: in production, using a reverse proxy like Nginx is recommended instead of running Express directly over HTTPS):

const express = require('express');
const https = require('https');
const fs = require('fs');
const path = require('path');

const app = express();

// Serve static files from React build
app.use(express.static(path.join(__dirname, 'client/build')));

// Catch all handler to serve React app
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'client/build/index.html'));
});

// HTTPS options with your certificate files
const options = {
  key: fs.readFileSync('/path/to/privkey.pem'),
  cert: fs.readFileSync('/path/to/cert.pem')
};

// Start HTTPS server
https.createServer(options, app).listen(443, () => {
  console.log('HTTPS server running on port 443');
});

4. Check for Other Mixed Content #

Don't forget to scan your entire app for other HTTP references:

• Canvas-related scripts: If you're loading images or external resources for your canvas drawings, ensure those use HTTPS or relative paths.
• API requests: If your frontend makes API calls to your Express backend, make sure those URLs use HTTPS (or relative paths like /api/endpoint).

Verify the Fix #

After applying these changes:

• Deploy your updated build to your server.
• Test on a real Samsung mobile browser, or use Chrome's Device Toolbar to simulate a mobile device. Check the Network tab in developer tools to confirm all resources load over HTTPS with no mixed content errors.

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