纯JavaScript环境下Plaid QuickStart示例报错求助

问题原因分析 #

你遇到的两个错误本质上是同一个配置问题导致的：

• OAuth state参数错误：硬设置了receivedRedirectUri，但当前页面URL并不包含Plaid OAuth流程所需的oauth_state_id参数（该参数由Plaid在启动OAuth跳转时自动添加）。
• 跨域框架访问错误：错误的redirect配置导致Plaid的CDN框架无法与本地页面正常通信，触发浏览器跨域安全限制。

解决方案 #

1. 移除receivedRedirectUri配置项 #

receivedRedirectUri仅用于从OAuth授权页面跳转回应用时，用来恢复中断的Link会话。你当前是直接点击按钮打开Link，不属于跳转回应用的场景，因此不需要设置该参数。

2. 修正后的前端代码 #

<script src="https://cdn.plaid.com/link/v2/stable/link-initialize.js"></script>
<script type="text/javascript">
window.onload = function() {
    var handler = Plaid.create({
        token: "link-sandbox-85d50492-cb3b-4046-af2c-faefc1510af5",
        onLoad: function() {
            // Link加载完成后的自定义逻辑
        },
        onSuccess: function(public_token, metadata) {
            console.log('获取到Public Token:', public_token);
            // 此处可将public_token发送至后端交换access_token
        },
        onExit: function(err, metadata) {
            if (err) {
                console.error('Link退出错误:', err);
            }
        },
        onEvent: function(eventName, metadata) {
            console.log('Link事件:', eventName);
        }
    });

    document.getElementById("plaidButton").onclick = function(e) {
        handler.open();
    }
}
</script> 
<button id="plaidButton">Create Link</button>

3. （可选）OAuth场景的补充配置 #

如果你的应用需要支持OAuth授权流程（部分金融机构要求），请确保：

• 后端生成Link Token时，将redirect_uri参数设置为https://localhost:3000/（与Plaid后台配置一致）。
• 当用户从OAuth页面跳转回应用时（此时URL会带有oauth_state_id参数），再在Plaid.create中添加receivedRedirectUri: window.location.href来恢复会话。

为什么React版QuickStart可以正常运行？ #

React版示例会自动检测当前URL中是否存在oauth_state_id参数，仅在跳转回应用的场景下才会传入receivedRedirectUri，避免了非跳转场景下的参数错误。

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