当你在使用Facebook API时，你可能会遇到这样的错误："无效的redirect_uri"。尽管你认为你的URL没有问题，但这个错误仍然出现了。本文将介绍原因、解决方案和一些示例代码，帮助你克服这个问题。
为什么会出现这个错误？
这个错误通常是由于redirect_uri参数没有正确设置而导致的。为了允许用户通过Facebook登录到你的应用程序，你需要在Facebook开发者后台配置一个有效的redirect_uri。如果这个URI与你请求API时提供的不匹配，那么就会收到"无效的redirect_uri"错误。
例如，在下面的代码中，我们可以看到redirect_uri被设置为"http://example.com/facebook/callback"：
-- -------------------- ---- ------- --------- ------ -------------- ------- ----- ------ ----- -------- ------- --- --------------------------- - -- ------ --- -------- -- ------- -------------------- ---------- ------------------------------------------------------------------
如果在Facebook开发者后台的应用程序设置中，redirect_uri被设置为"http://example.com/callback"，那么请求API时就会出现"无效的redirect_uri"错误。
解决方案
为了解决这个问题，你需要确保在调用API时设置的redirect_uri参数与你在Facebook开发者后台设置的URI一致。你可以通过以下步骤来进行检查和设置：
- 在Facebook开发者后台选择你的应用程序并进入设置页面。
- 确保在“基本设置”选项卡下，填写了正确的“网站URL”。
- 在“Facebook登录”选项卡下，确保“授权回调URL”参数是你想要使用的重定向URI。
如果你正在使用多个redirect_uri，那么你需要将所有的URI都添加到应用程序设置的“授权回调URL”参数中，并在请求API时指定使用哪个URI。
除了上述步骤之外，还需要注意以下几点：
- 请始终使用HTTPS，这对于Facebook API是必须的。
- 确保redirect_uri参数是URI编码的。
- 如果你正在使用localhost，请使用IP地址而不是"localhost"作为URI中的主机名。
示例代码
以下是一个演示如何使用正确的redirect_uri参数来避免"无效的redirect_uri"错误的示例代码：
-- -------------------- ---- ------- --------- ------ -------------- ------- ----- ------ ----- -------- ------- --- --- ----------- - ---------------------- - --------------------- --------------------------- - -- ------ --- -------- -- ------- -------------------- ---------- ---------------------------------------
在这个示例中，我们使用window.location.origin动态获取当前页面的主机名和协议，并将它与"/facebook/callback"组合成一个完整的URI，作为redirect_uri参数传递给FB.login函数。
结论
"无效的redirect_uri"错误是在使用Facebook API时常见的错误之一。这个问题通常是由于redirect_uri参数没有正确设置导致的。通过仔细检查你在Facebook开发者后台的应用程序设置以及API请求中提供的redirect_uri参数，你可以避免这个错误并确保你的应用程序能够成功连接到Facebook API。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31154