Payfast沙箱POST请求触发CORS错误，Flutter Flow项目求助

我在Flutter Flow项目中调用PayFast沙箱地址 https://sandbox.payfast.co.za/eng/process 时遇到了CORS错误，想请教是否需要在请求头中添加特定信息来解决这个问题？

错误信息 #

Access to XMLHttpRequest at 'https://sandbox.payfast.co.za/onsite/%E2%80%8Bprocess' from origin 'https://khidmat.flutterflow.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

已尝试的操作 #

我曾尝试在请求头中添加 Access-Control-Allow-Origin: *，但这个方法无效。

解决建议 #

1. 理清CORS逻辑：Access-Control-Allow-Origin是服务端返回的响应头，不是客户端请求头，你在前端请求里加这个完全没用——CORS权限由PayFast的服务器控制，前端无法自行绕过。
2. 遵循PayFast官方集成规范：PayFast作为支付网关，不允许前端直接发起API请求，正确的做法是：
   • 后端中转请求：让你的后端服务调用PayFast API，前端只和自己的后端交互，天然绕过CORS限制。
   • 使用官方表单/重定向流程：按照PayFast文档，前端加载他们提供的支付表单脚本，或者引导用户跳转到PayFast的支付页面，避免直接发送AJAX请求。
3. 核对请求路径：你实际请求的是/onsite/process，但最初提供的沙箱地址是/eng/process，确认是否符合PayFast的API路径要求，避免路径错误引发额外问题。
4. 白名单申请（不推荐）：若坚持前端调用，需联系PayFast将你的Flutter Flow域名https://khidmat.flutterflow.app加入他们的CORS白名单，但支付网关通常不会开放此权限，且存在安全风险。

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