微信Angular应用集成腾讯验证码API遇Feature Policy违规问题求助

这个问题我之前碰到过类似场景，核心就是给你的Angular应用配置对应的Feature Policy HTTP头部，具体添加位置要看你的开发/部署场景，分情况说明：

1. 本地开发环境（使用Angular CLI的ng serve） #

如果你是在本地用Angular CLI调试，需要修改angular.json配置文件：
找到项目对应的serve配置块，在options里添加headers字段，把Feature-Policy头部加进去：

"projects": {
  "your-project-name": {
    "architect": {
      "serve": {
        "builder": "@angular-devkit/build-angular:dev-server",
        "options": {
          "browserTarget": "your-project-name:build",
          "headers": {
            "Feature-Policy": "accelerometer 'self'"
          }
        },
        // 其他配置项...
      }
    }
  }
}

修改完保存后，重启ng serve就能生效。

2. 生产环境部署（Nginx/Apache服务器） #

如果你的Angular应用打包后部署在传统Web服务器上：

Nginx #

在你的站点配置的server块中添加add_header指令：

server {
  listen 80;
  server_name your-domain.com;
  root /path/to/your/angular/dist/folder;
  
  # 添加Feature-Policy头部
  add_header Feature-Policy "accelerometer 'self'";
  
  # 其他Nginx配置（比如路由重写、静态文件处理等）...
}

配置完成后重启Nginx服务即可。

Apache #

可以在项目根目录的.htaccess文件中添加（如果服务器允许Override），或者直接修改Apache的站点配置文件：

Header set Feature-Policy "accelerometer 'self'"

确保Apache的mod_headers模块已经启用，然后重启Apache生效。

3. 云平台部署（如Firebase Hosting、AWS CloudFront等） #

Firebase Hosting #

修改项目根目录的firebase.json，在hosting下的headers数组中添加头部规则：

"hosting": {
  "public": "dist/your-project-name",
  "headers": [
    {
      "source": "**",
      "headers": [
        {
          "key": "Feature-Policy",
          "value": "accelerometer 'self'"
        }
      ]
    }
  ],
  // 其他Firebase配置...
}

部署时会自动应用这个头部。

AWS CloudFront #

在CloudFront分发的行为设置中，找到“自定义HTTP响应头”选项，添加键为Feature-Policy，值为accelerometer 'self'的头部，保存后等待分发生效即可。

额外提示 #

如果你知道腾讯验证码的具体域名，可以把'self'替换成对应的域名（比如https://captcha.tencent.com），这样更安全，只允许指定域名的iframe访问accelerometer API，示例：

Feature-Policy: accelerometer 'self' https://captcha.tencent.com;

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