React JS中如何通过POST表单数据重定向至外部URL？

方案1：前端动态生成隐藏表单提交 #

浏览器有跨域限制，直接用AJAX发POST到外部URL大概率会被拦截。换个思路，拿到API返回的数据后，动态创建一个隐藏的表单，把数据转成表单字段，自动提交这个表单就能实现POST跳转。

具体代码示例：

// 绑定原表单的提交事件
$('#your-form-id').submit(function(e) {
    e.preventDefault(); // 先阻止表单默认提交行为

    // 第一步：调用API获取数据
    $.ajax({
        type: 'GET', // 按实际API要求选GET/POST
        url: '你的API地址',
        success: function(sampleData) {
            // 创建指向外部URL的POST表单
            const redirectForm = $('<form>', {
                method: 'POST',
                action: EXTERNAL_URL,
                style: 'display: none;' // 隐藏表单不影响页面
            });

            // 把API返回的每个键值对转成隐藏表单字段
            Object.entries(sampleData).forEach(([key, value]) => {
                redirectForm.append($('<input>', {
                    type: 'hidden',
                    name: key,
                    value: value
                }));
            });

            // 将表单加入页面并自动提交
            redirectForm.appendTo('body').submit();
        },
        error: function(err) {
            console.log('API调用出错:', err);
        }
    });
});

方案2：后端中转请求 #

如果需要处理外部URL的返回结果，或者前端方案不符合需求，可以用自己的后端做中转：

1. 前端把原表单数据提交到自己的后端接口
2. 后端调用目标API获取数据
3. 后端把数据以POST形式转发到外部URL
4. 后端返回外部URL的响应，或者直接重定向过去

Node.js/Express的示例代码：

app.post('/forward-request', async (req, res) => {
    try {
        // 调用API获取数据
        const apiRes = await fetch('你的API地址', { method: 'GET' });
        const sampleData = await apiRes.json();

        // 用307重定向保留POST方法和数据到外部URL
        res.redirect(307, EXTERNAL_URL);

        // 若需处理外部响应再返回前端：
        // const formData = new FormData();
        // Object.entries(sampleData).forEach(([k, v]) => formData.append(k, v));
        // const externalRes = await fetch(EXTERNAL_URL, {
        //     method: 'POST',
        //     body: formData
        // });
        // const result = await externalRes.text();
        // res.send(result);
    } catch (err) {
        res.status(500).send('请求处理失败');
    }
});

原代码失败的原因 #

浏览器的同源策略会限制前端脚本直接向不同域名、端口或协议的地址发送AJAX请求，除非对方服务器配置了CORS（跨域资源共享）允许你的域名访问。如果外部URL没配置这个权限，你的AJAX请求就会被浏览器拦截，这就是问题所在。

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