使用Facebook Login SDK时http://localhost回调URI报错，无法关闭强制HTTPS

我之前也踩过这个一模一样的坑！Facebook开发者平台最近调整了默认规则，加上强制HTTPS选项无法关闭，确实给本地开发添了不少麻烦。给你几个实测有效的解决办法：

1. 确保利用localhost的HTTP豁免规则 #

Facebook其实对localhost有特殊待遇，允许在开发模式下使用HTTP，但需要注意两个关键细节：

• 必须精确填写带端口的URI：比如你的本地服务跑在3000端口，就填http://localhost:3000，只写http://localhost会触发HTTPS检查机制。
• 确认应用处于开发模式：在应用仪表盘的“基本设置”里，检查“应用模式”是不是设为“开发”——生产模式下localhost的HTTP请求会被严格拦截。

2. 本地搭建临时HTTPS服务（推荐长期方案） #

既然强制HTTPS关不了，不如直接在本地启用HTTPS，步骤简单易操作：

• 用框架自带的HTTPS启动：比如React项目可以直接修改启动命令为HTTPS=true npm start，Vue项目可以在vue.config.js里配置devServer.https: true，框架会自动生成临时自签名证书，虽然浏览器会提示“不安全”，但完全不影响本地开发测试。
• 用mkcert生成可信证书：如果不想看到浏览器的不安全提示，可以安装mkcert工具，运行mkcert localhost生成本地可信的证书和密钥，然后在你的服务配置里指定这两个文件，启动HTTPS服务。之后把https://localhost:你的端口号填到重定向URI里即可。

3. 检查应用设置的细节 #

有时候问题出在容易忽略的小细节上：

• 确认你修改的是当前使用的应用：开发者账号下可能有多个应用，别选错了目标应用的设置项。
• 修改URI后一定要点击保存：在“Valid OAuth Redirect URIs”修改完成后，记得滚动到页面底部点击“保存更改”，不然设置不会生效。

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