Plaid API 按钮仅在启用 --disable-web-security 时起作用

如何解决Plaid API 按钮仅在启用 --disable-web-security 时起作用

我在预算应用的前端使用 react-plaid-link，后端使用 Express/Node/MongoDB。

为了尽可能清楚地说明这个问题，我将避免添加任何与 MongoDB 相关的代码，因为它与问题的根源并不真正相关（至少我认为）。

>

我对后端的初始设置相当简单且非常直接：

// server.js
const express = require("express");
const connectDB = require("./config/db");
const path = require("path");
var cors = require("cors");
const plaid = require("plaid");

// Connect Database
connectDB();

// Middleware & cors
app.use(cors());
app.use(express.json({ extended: false }));

// plaid client
const client = new plaid.Client({
  clientID: my_client_id,secret: my_secret_id,env: plaid.environments.sandbox,});

与格子图案相关的第一个请求是从前到后的 post 请求，以便create a link token

// **front-end**
  // user loaded/logged in with their email && password,// generateLinkToken function is invoked with user id (uid)

  const generateLinkToken = async (uid) => {
    console.log(uid);
    const config = {
      headers: {
        "Content-Type": "application/json",},};
    try {
      const res = await axios.post(
        "http://localhost:5000/create_link_token",{
          uid,config
      );
      dispatch({
        type: GENERATE_LINK_TOKEN,payload: { link_token: res.data.link_token },});
    } catch (error) {
      console.log(error);
    }
  };

后端：

// server.js
app.post("/create_link_token",async (req,res) => {
  let { uid } = req.body;
  try {
    const response = await client.createLinkToken({
      user: {
        client_user_id: uid,client_name: "my_app_name",products: ["auth","transactions"],country_codes: ["US"],language: "en",account_filters: {
        depository: {
          account_subtypes: ["checking","savings"],});
    return res.send({ link_token: response.link_token });
  } catch (err) {
    return res.send({ err: err.message });
  }
});

到目前为止，一切似乎都正常。 配备新发行的link_token，根据 plaid docs 我应该能够初始化链接按钮。

// Dashboard.js
import React,{ useContext } from "react";
import AuthContext from "../context/auth/authContext";
import { PlaidLink } from "react-plaid-link";

const Dashboard = () => {
  const authContext = useContext(AuthContext);

  const { link_token } = authContext;

  const onEvent = (eventName,metadata) => {
    console.log("onEvent",eventName,metadata);
  };

  const onSuccess = async (public_token,metadata) => {
    console.log("onSuccess",public_token,metadata);
  };

  return (
    <>
      <PlaidLink
        token={link_token}
        onExit={onExit}
        onSuccess={onSuccess}
        onEvent={onEvent}
      >
        Open Link and connect your bank!
      </PlaidLink>
    </>
  );
};

export default Dashboard;

出于某种原因，该按钮显示出来，但点击后，没有任何反应，并出现此错误：

• 我已验证链接令牌在初始化时有效并且存在

我不明白为什么会发生这种行为。

我也浏览了文档，但找不到对这种行为的任何解释。

经过数十次试验和错误后，我发现一个线程建议使用 --disable-web-security 命令打开一个全新的浏览器，然后它就可以正常工作了。

我相信这与 CORS 有关，这就是我在后端实施 cors 的原因。我只是不确定为什么按钮只有在启用 --disable-web-security 时才能正常工作。

如果有人指出我真正了解正在发生的事情的方向，并最终解决这个在过去 24 小时内让我发疯的“错误”，我将不胜感激。