如何在React组件中通过React Query调用Laravel PHP Curl接口发送请求体

Laravel 后端配置 #

路由配置（routes/api.php） #

先在API路由中定义接收前端请求的接口：

use App\Http\Controllers\ThirdPartyApiController;

Route::post('/proxy-third-party', [ThirdPartyApiController::class, 'proxyRequest']);

控制器实现（app/Http/Controllers/ThirdPartyApiController.php） #

创建控制器处理请求，用Curl（这里用Laravel封装的Http门面，底层基于Curl）转发请求到第三方API：

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Http;

class ThirdPartyApiController extends Controller
{
    public function proxyRequest(Request $request)
    {
        // 验证前端传入的手机号参数
        $request->validate([
            'mobile_no' => 'required|string',
        ]);

        // 转发请求到第三方API
        $thirdPartyResponse = Http::post('https://你的第三方API地址', [
            'mobile_no' => $request->input('mobile_no'),
            // 按需添加其他需要传递给第三方的参数
        ]);

        // 将第三方的响应原样返回给前端
        return response()->json($thirdPartyResponse->json(), $thirdPartyResponse->status());
    }
}

如果需要手动使用原生Curl（而非Laravel Http门面），可以替换成以下代码：

public function proxyRequest(Request $request)
{
    $request->validate([
        'mobile_no' => 'required|string',
    ]);

    $curl = curl_init();
    curl_setopt_array($curl, [
        CURLOPT_URL => 'https://你的第三方API地址',
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_POST => true,
        CURLOPT_POSTFIELDS => json_encode([
            'mobile_no' => $request->input('mobile_no'),
        ]),
        CURLOPT_HTTPHEADER => [
            'Content-Type: application/json',
        ],
    ]);

    $response = curl_exec($curl);
    $httpCode = curl_getinfo($curl, CURLINFO_HTTP_CODE);
    curl_close($curl);

    return response()->json(json_decode($response, true), $httpCode);
}

React 前端实现（React Query + Axios） #

依赖安装 #

先安装必要的包：

npm install @tanstack/react-query axios

组件代码 #

在React组件中使用React Query的useMutation来发送POST请求：

import { useMutation } from '@tanstack/react-query';
import axios from 'axios';

function MobileRequestComponent() {
    // 定义mutation处理请求
    const { mutate, isLoading, error } = useMutation({
        // 异步请求函数，接收手机号参数
        mutationFn: async (mobileNo) => {
            const res = await axios.post('/api/proxy-third-party', {
                mobile_no: mobileNo,
            });
            return res.data;
        },
        // 请求成功回调
        onSuccess: (responseData) => {
            console.log('第三方API返回数据:', responseData);
            // 这里可以做成功后的业务逻辑，比如弹窗提示、跳转页面等
        },
        // 请求失败回调
        onError: (err) => {
            console.error('请求出错:', err.response?.data || err.message);
            // 错误提示逻辑
        },
    });

    // 表单提交处理
    const handleSubmit = (e) => {
        e.preventDefault();
        const inputMobile = e.target.mobile_no.value.trim();
        if (inputMobile) {
            mutate(inputMobile);
        }
    };

    return (
        <form onSubmit={handleSubmit} className="mobile-form">
            <input
                type="text"
                name="mobile_no"
                placeholder="请输入手机号"
                disabled={isLoading}
            />
            <button type="submit" disabled={isLoading}>
                {isLoading ? '处理中...' : '提交请求'}
            </button>
            {error && <p className="error-message">{error.message}</p>}
        </form>
    );
}

export default MobileRequestComponent;

关键说明 #

• React Query的useMutation专门处理POST/PUT/DELETE这类修改数据的请求，自动管理加载、错误状态，无需手动维护useState
• Laravel作为中间层，后端到后端的请求不受浏览器CORS限制，完美解决前端直接调用第三方API的跨域问题
• 前后端都做了参数校验，保证请求的合法性
• 可以根据实际需求调整React Query的配置，比如添加重试机制、缓存策略等

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