reactjs中集成条带支付网关时出现问题

Question

我正在尝试在我的React项目中集成条带支付网关，但发生了cors相关问题。谁能帮我解决这个问题。

“从原点'https://connect.stripe.com/oauth/token'到'http://localhost:3000'处获取的访问已被CORS策略阻止：对预检请求的响应未通过访问控制检查：没有'Access-Control-Allow-Origin'标头如果请求不透明，则可以将请求的模式设置为“ no-cors”，以在禁用CORS的情况下获取资源。“

但是当我在Chrome浏览器中禁用cors时，效果很好。有没有其他方法可以将带状支付网关集成到reactjs项目中？

我的代码：

      const bodyFormData = new FormData()
      bodyFormData.append("client_secret", "");
      bodyFormData.append("code", code);
      bodyFormData.append("grant_type", "authorization_code");

      fetch("https://connect.stripe.com/oauth/token", {
        method: 'POST',
        body: JSON.stringify(userData),
        headers:{
        Accept:'application/json',
        'Content-Type': 'application/json; charset=utf-8',
        'Access-Control-Allow-Origin':"*",
        OPTIONS: '',
        }
    })
    .then((response) => response.json())
    .then((res) => {
      console.log(res);
        resolve(res);
    })
    .catch((error) => {
       reject(error);
    });   

Answer 1

看来您正在从浏览器的前端React代码进行调用to complete the connection。您无法做到这一点，它将永远无法正常工作，因为它使用了您的Stripe秘密密钥，该密钥永远不应位于前端。

相反，从OAuth页面重定向用户后，您应该从后端服务器路由进行此调用。