React项目localhost环境测试Apple Pay提示报错如何解决？

InvalidAccessError: Trying to start an Apple Pay session from an insecure document
该报错由Apple Pay API的安全校验规则触发，Apple Pay要求调用环境必须为HTTPS安全上下文，React默认启动的本地开发服务使用HTTP协议的localhost，不满足调用条件。

方法1：使用CRA内置HTTPS启动参数（最便捷） #

Create React App原生支持直接开启HTTPS服务，无需额外安装依赖，仅需要在启动命令前添加环境变量：

• macOS/Linux 终端执行：HTTPS=true npm start
• Windows CMD 执行：set HTTPS=true&&npm start
• Windows PowerShell 执行：($env:HTTPS = "true") -and (npm start)

启动后访问 https://localhost:3000，忽略浏览器的自签名证书不安全提示即可正常测试，本地自签名证书不会影响Apple Pay的功能校验。

方法2：配置自定义可信SSL证书 #

如果需要消除浏览器的不安全提示，可以自行生成本地自签名证书并配置到项目中：

1. 通过openssl工具生成证书（cert.pem）和私钥（key.pem）文件，存放到项目根目录的ssl文件夹下
2. 修改启动命令，指定证书路径：
   HTTPS=true SSL_CRT_FILE=./ssl/cert.pem SSL_KEY_FILE=./ssl/key.pem npm start
3. 将生成的cert.pem证书加入本地系统的信任根证书列表，后续访问本地HTTPS地址就不会弹出安全警告。

方法3：反向代理映射HTTPS服务 #

如果你使用非CRA的React脚手架（比如Vite），也可以通过ngrok、mkcert等工具，把本地运行的HTTP服务直接映射为对外的HTTPS服务，使用映射生成的HTTPS地址访问即可完成测试。

• 必须使用Safari浏览器测试，Chrome、Edge等其他桌面浏览器不支持Apple Pay JS API
• 需要提前在Apple Developer后台的商户ID配置中，将localhost添加为允许的域名
• 测试设备需已绑定有效的Apple Pay银行卡/交通卡，否则会触发其他初始化报错

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