Azure Web Apps通过PM2运行SPA时如何添加自定义响应头

现有React单页应用部署在Node 16 LTS栈的Azure Web Apps上，当前启动命令为：

pm2 serve /home/site/wwwroot --no-daemon --spa

需求是给所有响应添加Content-Security-Policy响应头。
已尝试过以下方案均未生效：

• 新增.htaccess配置文件
• 新增web.config配置文件
• 查找PM2、Node运行时可配置响应头的环境变量或内置配置项

当前约束：无服务端代码修改权限，无法通过业务代码注入响应头；React客户端侧设置CSP时机过晚，不符合安全要求，需要在Node服务层或Azure平台层完成配置。兜底方案为接入Front Door做响应头改写，但优先寻找无需额外接入Front Door的实现方式。

• .htaccess是Apache服务的配置文件，Azure Node栈Web App默认不会运行Apache，配置不会被加载
• web.config是Windows IIS的配置文件，如果你使用的是Linux版本Node 16 Web App，环境中没有IIS组件，该文件不生效
• PM2本身是进程管理工具，pm2 serve只是对静态服务包做了启动封装，没有暴露自定义响应头的配置入口，不存在对应的环境变量配置项

方案1：自定义Azure Web App内置Nginx配置（推荐，无额外依赖） #

Linux版本Azure Node Web App默认在前端运行Nginx作为反向代理，转发请求到后端的Node/PM2服务，你可以通过自定义Nginx配置直接添加全局响应头，不需要修改任何业务代码：

1. 在项目部署根目录下创建nginx.conf文件，写入以下配置，按需修改CSP规则内容即可：

server {
    listen 0.0.0.0:80 default_server;
    server_name _;
    root /home/site/wwwroot;

    # 配置需要添加的CSP响应头，always参数保证错误响应也会带上该头
    add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data:;" always;

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        # SPA路由兜底，匹配不到静态资源时返回index.html
        try_files $uri $uri/ /index.html;
    }
}

2. 进入Azure Web App的「配置」-「应用程序设置」板块，新增一项配置：
   • 键：NGINX_CONF_FILE
   • 值：/home/site/wwwroot/nginx.conf
3. 保存配置后重启应用，Nginx会自动加载自定义配置，所有响应都会携带你设置的CSP头。

方案2：修改启动命令，直接给静态服务传响应头参数 #

如果自定义Nginx配置不生效，可以直接替换原有启动命令，绕过pm2 serve的封装，直接调用底层静态服务的响应头配置参数，不需要修改业务代码：
将原有启动命令替换为以下内容，把CSP规则替换为你实际需要的值即可：

pm2 start npx --name spa-service -- serve -s /home/site/wwwroot -l 3000 --no-clipboard --header "Content-Security-Policy: 替换为你的实际CSP规则" && pm2 logs spa-service --no-daemon

该命令的逻辑和原有pm2 serve完全一致，只是通过serve包原生支持的--header参数给所有响应添加指定头，PM2依然负责进程守护，稳定性和原方案无差异。

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