Azure App Service(Node.js/React)修改web.config配置HTTP头未生效的解决办法

排查与修复步骤 #

• 确认web.config位置
  必须将web.config放在React构建产物的根目录（即Azure App Service的wwwroot文件夹下）。部署时要确保build/dist文件夹包含该文件，且上传后可通过Kudu工具（https://<你的应用名>.scm.azurewebsites.net/）查看wwwroot目录下是否存在最新的web.config。

• 修正Content-Security-Policy的无效值
  当前web.config中CSP的value=".."是无效配置，会被Azure忽略。替换为合法的CSP规则，示例：

  <add name="Content-Security-Policy" value="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;" />
  

• 检查Node.js启动方式是否覆盖配置
  如果你的App Service通过Node服务（如Express）托管静态文件，而非直接用IIS托管构建产物，web.config的IIS配置不会生效。此时需在Node代码中直接设置响应头：

  const express = require('express');
  const app = express();
  
  // 移除X-Powered-By
  app.disable('x-powered-by');
  
  // 设置安全头
  app.use((req, res, next) => {
    res.setHeader('X-Frame-Options', 'SAMEORIGIN');
    res.setHeader('Content-Security-Policy', "default-src 'self'; script-src 'self' 'unsafe-inline';");
    next();
  });
  
  app.use(express.static('build'));
  // 其他路由逻辑...
  

• 验证App Service运行时配置
  进入Azure门户的App Service配置页：

  • 在常规设置中，若启动命令为空，说明是IIS托管静态文件，确保web.config配置正确；若有启动命令（如node server.js），则需用Node代码设置头。
  • 确认运行栈为Node.js 14，版本不匹配可能导致配置解析异常。

• 清除缓存并重启服务
  Azure可能缓存旧配置，部署后在App Service概述页点击重启，或用Azure CLI执行：

  az webapp restart --name <你的应用名> --resource-group <你的资源组名>
  

• 排查上游服务的头覆盖
  若App Service配置了应用程序网关或Azure CDN，这些服务可能添加/覆盖响应头，需检查对应服务的头配置，确保与web.config设置一致。

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