如何在Azure App Service部署的Vue.js SPA中实现HSTS？

先给你说清楚之前的操作为啥没用：

• web.config是Windows IIS用的配置文件，Linux版Azure App Service默认靠NGINX或Apache托管静态文件，这个文件根本不会被读取。
• vite里的server.headers只在本地开发服务器生效，生产构建完的静态文件部署到Azure后，服务器根本不认这个配置。

下面给你几个靠谱的解决办法，按简单程度排序：

方案1：直接在Azure门户配置（最省事） #

不用改代码，直接在Azure后台给你的前端App Service加响应头：

1. 打开你的前端App Service的Azure门户页面
2. 左侧点「配置」→「常规设置」
3. 往下滑到「响应标头」，点击「添加」
4. 键填Strict-Transport-Security，值填max-age=31536000; includeSubDomains; preload
5. 保存配置，等App Service重启完就生效了

方案2：自定义NGINX配置（适合需要更多控制的场景） #

Linux版Azure App Service默认用NGINX托管静态内容，你可以自己写NGINX配置文件来加头：

1. 在Vue项目根目录建个.nginx文件夹，里面新建nginx.conf，内容如下：

server {
    listen 8080;
    server_name localhost;
    root /home/site/wwwroot;
    index index.html index.htm;

    # 添加上HSTS头
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;

    # 处理SPA路由刷新404的问题
    location / {
        try_files $uri $uri/ /index.html;
    }
}

2. 执行npm run build构建项目，把.nginx文件夹和dist里的所有文件一起部署到Azure App Service的/home/site/wwwroot路径下
3. 重启App Service，NGINX会自动加载这个自定义配置

方案3：换用Azure Static Web Apps（如果是纯静态SPA） #

如果你的前端就是纯静态的SPA，也可以考虑迁移到Azure Static Web Apps，它支持用配置文件加头：

1. 在项目根目录创建staticwebapp.config.json文件：

{
  "routes": [
    {
      "route": "/*",
      "serve": "/index.html",
      "statusCode": 200
    }
  ],
  "globalHeaders": {
    "Strict-Transport-Security": "max-age=31536000; includeSubDomains; preload"
  }
}

2. 部署到Azure Static Web Apps就自动生效了

最后提个醒：

• 一定要确保你的App Service已经开了HTTPS，HSTS只对HTTPS请求起作用
• 如果你加了preload参数，后续得自己提交到HSTS预加载列表，不然浏览器不会把你的域名加入预加载

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