React使用Axios发送POST请求返回404 Not Found错误如何解决

• 核心错误：你代码里的datafetch是fetch(fetchUrl)的返回值，本身是一个Promise对象，不是字符串类型的请求地址。你直接把这个Promise传给axios.post当第一个参数（请求URL），Axios会自动把它转成字符串[object Promise]，如果没有配置Axios全局baseURL，默认会拼接当前页面的域名http://localhost:3001/，所以最终请求地址就变成了报错里的http://localhost:3001/[object%20Promise]，自然返回404。
• 逻辑冗余：你同时混用了原生fetch和Axios两个请求库，完全没必要，选其中一种使用即可。

1. 删掉冗余的let datafetch = fetch(fetchUrl);这行代码，直接把构造好的请求地址传给Axios即可
2. 推荐直接用Axios自带的params配置项处理query参数，不需要手动拼接、编码URL，降低出错概率

import { useState, useEffect } from 'react';
import axios from 'axios';

// 组件内部逻辑
const [fetchedData, setFetchedData] = useState('');

async function fetchData(){
    const postData = {
        "email": "test@gmail.com",
        "language": "en",
        "country": "en",
        "istestentry": false
    };
    const jsonData = JSON.stringify(postData);
    const requestUrl = "https://example.org/b/receiver/external";
    try {
        const {data: resData} = await axios.post(
            requestUrl,
            // POST请求体无额外数据可填空对象，有需要提交的body参数也可以放在这里
            {},
            {
                // params配置会自动编码、拼接query参数到URL后
                params: {
                    datajsonstr: jsonData,
                    _: Date.now()
                }
            }
        )
        setFetchedData(resData)
    } catch (err) {
        // 增加错误捕获方便后续调试
        console.error('请求失败：', err)
    }
}

useEffect(() => {
    fetchData()
}, [])

const handleSubmit = (event) => {
    event.preventDefault();
    fetchData()
};

• 如果请求的目标地址和当前前端域名不同，需要服务端配置CORS跨域规则，否则会触发跨域拦截错误
• 如果接口要求把参数放在POST请求体里，不需要拼在URL上，直接把参数传给axios.post的第二个参数即可，可以按需调整参数传递位置

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