React部署GitHub Pages出现Permissions-Policy header警告如何解决

1. 什么是Permissions-Policy #

Permissions-Policy是W3C定义的HTTP响应头标准，用于让站点开发者明确指定当前页面、以及页面内嵌的iframe可使用的浏览器特性范围，常见管控的特性包括地理位置调取、摄像头/麦克风访问、通知推送、后台同步等，核心作用是减少恶意第三方资源滥用浏览器能力的风险。

2. Error with Permissions-Policy header: Unrecognized feature: 'interest-cohort'警告的触发原因 #

interest-cohort是谷歌废弃的FLoC（用于广告用户群体追踪的实验性技术）对应的特性标识，目前主流浏览器均已移除对该标识的识别。该警告并非你的React代码问题，是GitHub Pages默认会给所有站点响应加Permissions-Policy: interest-cohort=()的头，用来禁用FLoC特性，现在该特性被废弃后，浏览器识别到未知的特性标识就会抛出这个警告，本地运行无警告是因为本地开发服务不会添加这个响应头。

3. 修复方案 #

你可以根据需求选择任意一种方案处理：

• 方案一：直接忽略
  该警告属于低优先级的提示类信息，不会影响页面的正常功能运行，也不会导致业务逻辑报错，如果对控制台的提示容忍度较高可以不用做任何处理。
• 方案二：自定义GitHub Pages响应头覆盖默认配置
  在React项目的public目录下新建名为_headers的无后缀文件，写入如下内容：

/*
  Permissions-Policy: geolocation=(), camera=(), microphone=(), payment=()

以上配置可以根据你的实际业务需要调整允许的特性，只要配置中不包含interest-cohort字段即可，GitHub Pages部署时会优先读取你项目内的_headers文件配置，覆盖默认的响应头，警告就会消失。

• 方案三：如使用自定义部署配置，可以在构建配置中添加响应头规则
  如果你是通过gh-pages以外的流程部署，也可以在对应的部署配置项中添加自定义Permissions-Policy的规则，移除interest-cohort相关配置即可。

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