前后端分离项目如何配置HTTPS

现在很多网站都用上了 HTTPS，尤其是前后端分离的项目，前端走静态资源，后端提供接口，跨域请求频繁，不配 HTTPS 的话浏览器动不动就弹警告，用户体验差不说，数据也不安全。

为什么前后端分离要配 HTTPS

比如你前端部署在 https://www.site.com，后端接口在 https://api.site.com，如果其中一个是 HTTP，哪怕只是开发时临时用，现代浏览器也会直接拦截请求。特别是涉及登录、支付这些敏感操作，HTTP 根本过不了关。

获取 SSL 证书

最简单的方式是用免费的 Let's Encrypt 证书。通过 Certbot 工具可以快速申请，支持自动续期。比如你在 Nginx 服务器上运行：

sudo certbot --nginx -d www.site.com -d api.site.com

它会自动完成域名验证，并在 Nginx 配置中启用 HTTPS。

前端部署配置 HTTPS

前端一般用 Nginx 或 CDN 托管。以 Nginx 为例，配置如下：

server {
    listen 443 ssl;
    server_name www.site.com;

    ssl_certificate /path/to/fullchain.pem;
    ssl_certificate_key /path/to/privkey.pem;

    root /var/www/frontend;
    index index.html;

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

后端 API 启用 HTTPS

后端如果是 Node.js 服务，可以直接用 HTTPS 模块启动：

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

const options = {
  cert: fs.readFileSync('/path/to/cert.pem'),
  key: fs.readFileSync('/path/to/private.key')
};

https.createServer(options, app).listen(443);

不过更常见的做法是让 Nginx 做反向代理和 SSL 终止，后端仍跑在 HTTP 上，由 Nginx 负责加解密：

server {
    listen 443 ssl;
    server_name api.site.com;

    ssl_certificate /path/to/fullchain.pem;
    ssl_certificate_key /path/to/privkey.pem;

    location / {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-Proto https;
    }
}

处理跨域和协议一致

前后端都走 HTTPS 后，还要确保前端请求接口时用的是 https 协议。比如前端代码里写 axios 请求，不能还写着 http://api.site.com/login，得改成 https，或者用相对协议：//api.site.com/login。

如果用了 Webpack 或 Vite 开发，本地调试时也可以配个 HTTPS：

// vite.config.js
export default {
  server: {
    https: true,
    proxy: {
      '/api': {
        target: 'https://api.site.com',
        changeOrigin: true
      }
    }
  }
}

这样本地开发时浏览器也不会因为混合内容而报错。

CDN 和二级域名统一加密

如果你的前端资源放在 CDN 上，比如 static.site.com，也要给这个域名配上证书。大多数云服务商如阿里云、腾讯云都支持一键接入免费证书，上传证书内容就行。

多个子域名可以用泛域名证书，比如 *.site.com，一次覆盖所有子域，省得每个都申请。