Vue前端集成Plaid Link API遇阻：弹窗无法初始化求助

我正在把Plaid API集成到Vue前端+Java后端的网站里，请求link token能正常拿到响应，但Plaid Link弹窗没法初始化。我怀疑是脚本挂载的问题，但不确定，这卡得我和伙伴都没辙。这是我们第一次从零搭网站对接API，求技术帮忙！

Vue前端代码 #

<template>
    <h1>Home Page</h1>
    <h2>Connect To Plaid</h2>
        <button @click="connectToBank">Link Account</button>
        <div>{{pl}}</div>
</template>

<script>
export default {
mounted(){
      let Plaid = document.createElement('script')
      Plaid.setAttribute('src', 'https://cdn.plaid.com/link/v2/stable/link-initialize.js')
      document.head.appendChild(Plaid)
    },


  name: 'HomePage',
  data() {
    return {
     answer: "",
     pl: window.Plaid,
     link_token: null,

    };
  },
methods: {

//Gets the link token as a string and returns it

      async getLinkToken() {
         const linkTokenResponse =  await fetch("api/generateLinkToken");
         const data = await linkTokenResponse.json();
         const linkToken = data.linkToken;
         console.log(linkToken);
         return linkToken;
         },

//Gets the access token as a string and returns it, will eventually return other data and not log the token

    async getAccessToken(publicToken) {
     const publicTokenResponse = await fetch ("/api/createAccessToken", {
               method: 'POST',
               headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'},
               body: JSON.stringify({public_token: publicToken})
               });
     const data = await publicTokenResponse.json();
     const accessToken = data.accessToken;
     console.log(accessToken);
     return accessToken;
     },

//Link popup init and public token handler

    async connectToBank() {
      const handler = window.Plaid.create({
         token : this.getLinkToken(),

         onSuccess: async (publicToken, metadata) => {
           console.log(`Finished with Link! ${JSON.stringify(metadata)}`);
           try {
           const access_token = this.getAccessToken(publicToken);
           console.log(access_token);
           } catch (error){
           console.log('Error, ${JSON.stringify(err)');
           }
         },
         onExit: async (err, metadata) => {
           console.log(
             `Exited early. Error: ${JSON.stringify(err)} Metadata: ${JSON.stringify(
               metadata
             )}`
           );
         },
         onEvent: (eventName, metadata) => {
           console.log(`Event ${eventName}, Metadata: ${JSON.stringify(metadata)}`);
         },
       });
       handler.open();
      },


    }
  }

</script>

错误信息 #

Error initializing Plaid Link. If the error persists, contact Support
Exited early. Error: null Metadata:
{"link_session_id":"","status":"","request_id":""}

核心问题排查与修复步骤 #

1. 异步函数未正确等待，导致token传递错误 #

getLinkToken是异步函数，直接赋值给token会传入Promise而非实际的link token，这是弹窗初始化失败的核心原因。修改connectToBank方法：

async connectToBank() {
  // 先等待获取到实际的link token
  const linkToken = await this.getLinkToken();
  const handler = window.Plaid.create({
    token: linkToken, // 传入实际token而非Promise
    onSuccess: async (publicToken, metadata) => {
      console.log(`完成Link连接！${JSON.stringify(metadata)}`);
      try {
        // 同样要等待access token获取完成
        const access_token = await this.getAccessToken(publicToken);
        console.log(access_token);
      } catch (error){
        console.log(`错误：${JSON.stringify(error)}`);
      }
    },
    onExit: async (err, metadata) => {
      console.log(
        `提前退出。错误：${JSON.stringify(err)} 元数据：${JSON.stringify(metadata)}`
      );
    },
    onEvent: (eventName, metadata) => {
      console.log(`事件 ${eventName}，元数据：${JSON.stringify(metadata)}`);
    },
  });
  handler.open();
}

2. 脚本加载时机问题 #

当前在mounted里动态加载脚本，但window.Plaid可能还未初始化就被赋值，或者点击按钮时脚本还没加载完成。可以优化：

• 方案一：直接把Plaid脚本放到public/index.html的<head>里，确保页面加载时脚本已就绪：

<script src="https://cdn.plaid.com/link/v2/stable/link-initialize.js"></script>

• 方案二：如果坚持动态加载，要确保脚本加载完成后再允许点击：

data() {
  return {
    // ...其他数据
    plaidLoaded: false,
  };
},
mounted(){
  let PlaidScript = document.createElement('script')
  PlaidScript.setAttribute('src', 'https://cdn.plaid.com/link/v2/stable/link-initialize.js')
  PlaidScript.onload = () => {
    this.plaidLoaded = true;
    console.log('Plaid脚本加载完成');
  }
  document.head.appendChild(PlaidScript)
},
methods: {
  async connectToBank() {
    if (!this.plaidLoaded) {
      alert('Plaid正在加载，请稍后再试');
      return;
    }
    // 后续逻辑同上
  }
}

3. 请求头与参数格式不匹配 #

getAccessToken里请求头设为application/x-www-form-urlencoded，但body用了JSON.stringify，后端无法解析参数。修改请求头为application/json：

async getAccessToken(publicToken) {
  const publicTokenResponse = await fetch ("/api/createAccessToken", {
    method: 'POST',
    headers: {'Content-Type': 'application/json'}, // 修改为JSON格式
    body: JSON.stringify({public_token: publicToken})
  });
  const data = await publicTokenResponse.json();
  const accessToken = data.accessToken;
  console.log(accessToken);
  return accessToken;
}

4. 额外排查点 #

• 确认后端返回的linkToken格式正确，无多余引号或转义字符
• 检查浏览器控制台是否有CORS错误，若有需后端配置跨域允许
• 确保Plaid环境（沙盒/开发/生产）与link token生成环境一致

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