React集成Twitter登录报错TypeError: Failed to fetch求助

先来说你遇到的net::ERR_CONNECTION_REFUSED错误——这个问题很直接，就是你的后端服务（运行在localhost:4000的那个）根本没启动，或者端口配置错了。你可以先做这几步排查：

• 打开浏览器直接访问http://localhost:4000/api/v1/auth/twitter，如果显示无法访问，那说明后端服务没跑起来，先启动你的后端项目，确保它在4000端口正常运行。
• 检查后端的路由配置，确认/api/v1/auth/twitter和/api/v1/auth/twitter/reverse这两个接口路径没有拼写错误，路由确实存在。

接下来是Twitter开发者平台的配置问题，我给你明确说该填什么：

Website URL与Callback URL配置 #

• Website URL：直接填你的前端项目地址http://localhost:3000就好，这是开发环境下你的应用主地址。
• Callback URL：这里要填后端接收Twitter授权回调的接口地址。举个例子，如果你的后端处理Twitter回调的路由是http://localhost:4000/api/v1/auth/twitter/callback，就把这个地址填进去。注意：
  1. 要确保这个回调接口在后端已经实现，能正确处理Twitter返回的授权信息。
  2. 在Twitter开发者平台的「Authentication Settings」里，要勾选「Allow this app to be used for Sign in with Twitter」，同时把刚才的Callback URL添加到列表中。
  3. 开发环境下localhost的HTTP地址是允许的，不用强制HTTPS，但上线后必须换成HTTPS的正式域名。

另外，等后端启动后，可能还会遇到跨域问题（因为前端在3000端口，后端在4000端口），记得在后端配置CORS，允许来自http://localhost:3000的请求访问。

最后，再检查一下你的TwitterLogin组件参数，确认loginUrl和requestTokenUrl的地址和后端实际的接口地址完全一致，没有拼写错误。

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