React中调用Axios POST请求遇AxiosError: Network Error求助

问题1：Axios请求参数错误 #

你的代码里用payload: data传递请求体，但Axios中POST请求的请求体必须通过data字段传递，payload不是Axios的合法配置项，这会导致请求无法正确携带数据，甚至触发请求异常。

修正后的请求代码 #

const postData = () => {
  axios({
    method: "post",
    baseURL: "https://somesite.com",
    url: "/bkdb_getvendorcodes",
    data: data, // 替换原有的payload为data
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
};

更简洁的写法：

const postData = () => {
  axios.post("https://somesite.com/bkdb_getvendorcodes", data)
  .then(response => console.log(response))
  .catch(error => console.log(error));
};

问题2：前端安装cors包无效 #

你执行了npm install cors，但这个包是给后端服务（如Node.js/Express）使用的跨域中间件，前端安装它完全起不到作用。解决跨域的正确方式有两种：

• 方案一：后端配置CORS
  让后端在响应头中添加Access-Control-Allow-Origin等CORS相关字段，允许你的前端域名发起请求。
• 方案二：本地开发配置React代理
  1. 先安装代理依赖：npm install http-proxy-middleware --save-dev
  2. 在项目src目录下创建setupProxy.js文件，添加以下内容：

     const { createProxyMiddleware } = require('http-proxy-middleware');
     
     module.exports = function(app) {
       app.use(
         '/bkdb_getvendorcodes',
         createProxyMiddleware({
           target: 'https://somesite.com',
           changeOrigin: true,
         })
       );
     };
     

  3. 修改请求代码为相对路径：

     axios.post("/bkdb_getvendorcodes", data)
     

  4. 重启React开发服务器，代理会自动转发请求，规避跨域限制。

其他排查点 #

• 验证目标URL有效性：确认https://somesite.com/bkdb_getvendorcodes能在浏览器或Postman中正常访问并返回响应。
• 检查HTTPS证书：如果目标站点使用自签名或不合法的HTTPS证书，浏览器会拦截请求导致Network Error，可让后端更换合法证书，或本地开发临时禁用证书校验（不推荐生产环境）。
• 查看浏览器Network面板：通过控制台的Network标签，查看请求的状态码、请求头、响应头信息，进一步定位问题。

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