三步搞定前端HTTPS项目代理配置：从混合内容到自定义头透传

原创已于 2025-02-16 22:13:48 修改 · 638 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #https #http

于 2025-02-15 23:16:08 首次发布

在 HTTPS 前端项目中，你是否遇到过以下问题？

✅ 混合内容警告：页面部分资源走 HTTP 导致被浏览器拦截
✅ 跨域接口代理：需要将特定路径转发到外部 HTTP 服务
✅ 自定义头丢失：Authorization、access_token 等头信息未透传到后端

本文用最简配置，三步解决所有问题！ 文末附完整配置文件和避坑指南。

一、根治混合内容问题：全站强制 HTTPS

1.1 Nginx 基础安全配置


server {
    listen 443 ssl;
    server_name test.yourDomain.com;

    # 证书配置
    ssl_certificate cert/test.yourDomain.com.pem;
    ssl_certificate_key cert/test.yourDomain.com.key;

    # 安全增强配置
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload";
    add_header Content-Security-Policy "upgrade-insecure-requests";
    add_header X-Content-Type-Options "nosniff";

    # 静态资源服务
    location / {
        root /usr/local/front;
        index index.html;
    }
}

关键配置说明：

Strict-Transport-Security：强制浏览器未来一年内仅用 HTTPS 访问
upgrade-insecure-requests：自动将页面中的 HTTP 资源升级为 HTTPS

二、接口代理实战：内外网服务无缝衔接

2.1 生产环境 Nginx 代理配置


location /lotApi {
    # 路径重写：移除前缀
    rewrite ^/lotApi/(.*) /$1 break;

    # 代理到外部服务
    proxy_pass http://119.0.0.0:15556;

    # 核心代理头设置
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-Proto $scheme;  # 告知后端协议为 HTTPS
    proxy_set_header X-Real-IP $remote_addr;     # 传递真实客户端 IP
}

2.2 开发环境 Vite 配置


// vite.config.js
export default {
  server: {
    proxy: {
      '/lotApi': {
        target: 'http://119.0.0.0:15556',
        rewrite: path => path.replace(/^\/lotApi/, ''),
        changeOrigin: true
      }
    }
  }
}

三、自定义请求头透传：解决鉴权难题

3.1 透传 access_token 头

当接口请求头中携带自定义内容的时候，通过代理转发请求默认情况下不会把请求头中的内容一起转发过去，这时候可通过设置透传自定义头进行解决：


location /lotApi {
    # 允许下划线头 + 透传自定义头
    underscores_in_headers on;
    proxy_set_header access_token $http_access_token;

    # 常规代理配置
    proxy_pass http://119.0.0.0:15556;
    ...
}

3.2 前端请求示例


axios.get('/lotApi/user/info', {
  headers: {
    access_token: 'eyJhbGciOi...',  // JWT Token
    Custom-Header: 'value'          // 支持任意自定义头
  }
})

避坑指南：

CORS 预检问题：确保后端返回 Access-Control-Allow-Headers: access_token
敏感头保护：通过 Cookie 或加密方式传递关键凭证更安全

完整配置文件（Nginx 增强版）


http {
    underscores_in_headers on;  # 全局允许下划线头

    server {
        listen 443 ssl;
        server_name test.yourDomain.com;

        # SSL 证书
        ssl_certificate cert/test.yourDomain.com.pem;
        ssl_certificate_key cert/test.yourDomain.com.key;

        # 安全头
        add_header Strict-Transport-Security "max-age=31536000";
        add_header Content-Security-Policy "upgrade-insecure-requests";

        # 代理配置
        location /lotApi {
            rewrite ^/lotApi/(.*) /$1 break;
            proxy_pass http://119.0.0.0:15556;

            proxy_set_header Host $host;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_set_header access_token $http_access_token;
        }

        # 静态资源
        location / {
            root /usr/local/front;
            index index.html;
        }
    }
}

常见问题速查

现象	排查方向	解决方案
413 请求头过大	Nginx 缓冲区限制	增加 `proxy_buffer_size`
401 未授权	自定义头未透传	检查 Nginx `underscores_in_headers`
502 Bad Gateway	网络连通性问题	`telnet 120.78.87.28 15556` 测试
混合内容警告仍出现	页面硬编码 HTTP 资源	全局搜索替换 `http://` 为 `//`

结语

通过三步配置，我们实现了：
🔒 全站 HTTPS 强制 → 杜绝混合内容警告
🔄 接口无缝代理 → 开发生产环境一致体验
🔑 头信息完整透传 → 保障鉴权体系稳定运行

实践建议：修改配置前务必备份原文件，每次只修改一个配置项并验证效果。遇到问题欢迎在评论区交流！