使用react-twitter-login时出现Unhandled Rejection Failed to fetch错误如何解决

这个报错本质是前端请求Twitter OAuth接口被拦截，按照以下步骤排查即可解决：

• 第一步检查Twitter开发者后台配置：你代码里填写的callbackUrl必须和开发者平台对应应用的「OAuth 1.0a 设置」中的回调地址完全匹配，协议、端口、路径不能有任何差异，当前你用的http://localhost:3000/需要先添加到后台的回调地址白名单中。
• 第二步确认跨域问题：Twitter的OAuth 1.0a接口默认不允许前端跨域调用，react-twitter-login的前端直连写法仅可用于本地调试，生产环境必须走后端代理：

  前端直接暴露consumerSecret属于严重安全漏洞，任何人都可以从前端打包产物中提取密钥滥用你的开发者账号权限。Twitter官方要求OAuth签名验证流程必须在服务端完成，前端仅需和自己的后端服务交互即可避免跨域问题。

• 本地临时调试方案：可以启动带跨域禁用参数的浏览器完成测试，Chrome Windows 启动命令参考：
  chrome.exe --disable-web-security --user-data-dir="C:/chrome_dev_tmp"
  macOS 启动命令参考：
  open -n /Applications/Google\ Chrome.app --args --disable-web-security --user-data-dir="/tmp/chrome_dev_tmp"
• 生产环境正确实现逻辑：
  1. 前端移除consumerSecret参数，仅向后端传递用户授权后的回调参数
  2. 后端封装Twitter OAuth请求逻辑，完成签名、验签、用户信息获取后再返回给前端

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