部署网站至Heroku遇Mixed Content错误求助：本地正常线上失效

Hey there, let’s get that mixed content issue sorted out—this is super common when deploying to Heroku, and it’s totally fixable once you know the right tweaks.

First, let’s recap the problem: Heroku serves your app over HTTPS by default, but somewhere in your code or assets, you’re still requesting resources (like stylesheets, scripts, or images) over plain HTTP. Browsers block these insecure requests to keep users safe, hence the error you’re seeing.

Here’s how to fix it, depending on your setup:

1. Replace Hardcoded HTTP Links #

Start by hunting down any absolute URLs in your HTML, templates, or config files that start with http://. For example:

• Instead of <link rel="stylesheet" href="http://your-domain.com/css/style.css">, switch to HTTPS directly: <link rel="stylesheet" href="https://your-domain.com/css/style.css">
• Even better, use a protocol-relative path (auto-adapts to the current page’s protocol): <link rel="stylesheet" href="//your-domain.com/css/style.css">
• For your own static assets (like CSS/JS files in your repo), use root-relative paths instead of full URLs: <link rel="stylesheet" href="/css/style.css">—this will automatically use HTTPS when your app is served over HTTPS.

2. Configure Your App to Recognize HTTPS (For Backend-Rendered Apps) #

Heroku uses a reverse proxy, so your app might not realize it’s being served over HTTPS unless you tell it to trust the proxy headers. Here’s how for common frameworks:

Node.js/Express #

Add this middleware to force HTTPS and trust the proxy:

app.enable('trust proxy'); // Let Express know it's behind a Heroku proxy

app.use((req, res, next) => {
  // Redirect HTTP requests to HTTPS
  if (!req.secure) {
    return res.redirect(`https://${req.headers.host}${req.url}`);
  }
  next();
});

Ruby on Rails #

In config/environments/production.rb, enable forced SSL:

config.force_ssl = true
config.action_dispatch.default_headers = {
  'X-Frame-Options' => 'SAMEORIGIN',
  'X-Content-Type-Options' => 'nosniff'
}

Python/Django #

In settings.py, set:

SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')
SECURE_SSL_REDIRECT = True

3. Fix Third-Party Resources #

If you’re loading external assets (like Google Fonts, jQuery, or analytics scripts), make sure their URLs use HTTPS. Most major CDNs support HTTPS now—for example:

• Replace http://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js with https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js
• Or use the protocol-relative version: //ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js

4. Verify the Fix #

After making these changes, deploy to Heroku again. Then:

• Open your browser’s dev tools (F12) and check the Console tab for any remaining mixed content errors.
• Use the Network tab to filter by "HTTP" and see if any requests are still going over plain HTTP.

Once all resources are loading over HTTPS, that error should disappear entirely!

内容的提问来源于stack exchange，提问作者Don't worry