React+Express(GraphQL)同服务器NGINX SSL配置问题求助

Hey there, let's break down why your browser is throwing that unsafe connection warning when your React app tries to hit your Express/GraphQL server, and fix it step by step. The root issue almost always ties back to mixed content or misconfigured SSL settings—let's dive in.

1. The Most Likely Culprit: Mixed Content #

Your React app runs securely over HTTPS (https://name.com), but if your frontend code is calling the Express server using http://ip:8080, browsers will block this as "mixed content." HTTPS pages strictly restrict loading HTTP resources (especially API requests) because it breaks the secure context the browser expects.

How to Fix This: Use Nginx as a Reverse Proxy #

Instead of letting your frontend talk directly to http://ip:8080, we'll have Nginx handle all HTTPS traffic and forward API requests to your Express server. This keeps everything in a secure HTTPS flow.

First, update your Nginx 443 server block to add a reverse proxy rule for API requests:

server {
  listen 443 ssl;
  listen [::]:443 ssl;
  server_name name.com;
  # ... keep your existing SSL settings here ...

  # Add this location block for API proxying
  location /api {
    proxy_pass http://localhost:8080;  # Use localhost if Express is on the same server
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;  # Tells Express the original request was HTTPS
  }

  # ... keep your existing static file and React routing rules here ...
}

Then, update your frontend code to call https://name.com/api instead of http://ip:8080. For example, if you had a fetch call like:

fetch('http://ip:8080/graphql')

Change it to:

fetch('https://name.com/api/graphql')

2. Check Your Express SSL Configuration (If You Want Direct HTTPS Access) #

If you really need to access Express directly over HTTPS (not recommended—Nginx is far more robust for SSL management), double-check these details:

• Certificate Paths: Ensure fs.readFileSync is pointing to the correct location of name.chained.crt and name.key. If paths are wrong, Express won't load the certificate, and the connection will be untrusted.
• Certificate Domain Match: Your SSL certificate is issued for name.com, so accessing Express via an IP address (https://ip:8080) will trigger a domain mismatch error. Stick to https://name.com:8080 if you go this route, and make sure your firewall allows traffic on port 8080.

3. Clean Up Your Nginx 80 Port Configuration #

Your current 80-port server block has the return 301 redirect in an odd spot—let's fix that to ensure all HTTP traffic properly redirects to HTTPS:

server {
  listen 80;
  server_name name.com;  # Add this to target only your domain
  root /usr/share/nginx/html;
  index index.html index.htm;

  location / {
    try_files $uri $uri/ /index.html;
  }

  # ... keep your static resource caching rules here ...

  # Move the redirect to the end of the server block
  return 301 https://$server_name$request_uri;
}

Final Steps to Apply the Fixes #

1. Save your updated Nginx config files.
2. Test the Nginx config for errors: sudo nginx -t
3. If no errors appear, restart Nginx: sudo systemctl restart nginx
4. Restart your Express server to apply any changes.
5. Clear your browser cache and test the API calls again—you should no longer see the unsafe connection warning.

This setup keeps all traffic flowing through HTTPS, uses Nginx to handle SSL (which is more reliable than managing it in Express), and eliminates mixed content issues entirely.

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