Ionic React TypeScript中Axios与AJAX调用Web服务失败问题的解决咨询

看起来你遇到了跨域请求和异步处理的常见问题，我来帮你一步步排查和修复：

首先，纠正几个关键的配置错误 #

1. 错误的CORS请求头设置 #

Access-Control-Allow-Origin是服务器端必须返回的响应头，不是客户端发送的请求头！你在Axios和AJAX里设置这个头完全没用，反而可能干扰服务器的判断，直接删掉它。

2. GET请求的Content-Type冗余 #

GET请求没有请求体，通常不需要设置Content-Type头。你设置的text/xml可能不符合服务器对GET请求的预期，导致请求被拒绝，建议直接移除这个配置。

3. AJAX函数的异步返回问题 #

你的getFornecedores2函数是异步的，但直接在success里return对象是拿不到结果的——因为AJAX请求完成时，函数已经执行完毕了。必须用Promise封装，让调用方能正确获取异步返回的数据。

修改后的代码示例 #

修正Axios请求函数 #

// 简化并修正Axios配置
const configAxios = { 
  responseType: 'document', // 保持这个，因为你期望XML响应
  timeout: 10000, // 新增超时设置，避免请求无限挂起
  headers: {
    // 移除不必要的请求头
  } 
} 

export function getFornecedores() { 
  console.log("Dentro do getFornecedores"); 
  // 返回Promise，让useEffect可以异步处理
  return axios.get(`${config.web_service_url}/TM_GetEnt?pEntTp=F`, configAxios) 
    .then(response => { 
      console.log(response); 
      return response; 
    }) 
    .catch(err => {
      console.error("Axios falhou:", err);
      // 抛出错误，让调用方可以捕获处理
      throw err;
    });
} 

修正AJAX请求函数（用Promise封装） #

export function getFornecedores2() { 
  // 用Promise封装AJAX，让异步结果可以被await或.then获取
  return new Promise((resolve, reject) => {
    $.ajax({ 
      type: 'GET', 
      url: `${config.web_service_url}/TM_GetEnt?pEntTp=F`, 
      dataType: 'xml', // 明确告诉jQuery解析XML响应
      success: data => { 
        const entnm: string[] = []; 
        const entcd: string[] = []; 
        
        $('DocumentElement Tabela>ENTNM', data).each(function() {
          entnm.push($(this).text());
        });
        
        $('DocumentElement Tabela>ENTCD', data).each(function(index) {
          entcd.push($(this).text());
        });
        
        resolve({ entnm, entcd }); 
      }, 
      error: (jqXHR, textStatus, errorThrown) => { 
        console.error("AJAX ERROR:", textStatus, errorThrown); 
        alert("Erro"); 
        reject(new Error(`${textStatus}: ${errorThrown}`));
      } 
    }); 
  });
} 

在useEffect中正确调用异步函数 #

import { useEffect } from 'react';

// 组件内的useEffect
useEffect(() => {
  const fetchAllData = async () => {
    // 处理Axios请求
    try {
      const axiosResponse = await getFornecedores();
      // 这里可以处理Axios返回的XML数据
      console.log("Axios XML响应:", axiosResponse.data);
    } catch (err) {
      console.error("Axios请求失败:", err);
    }

    // 处理AJAX请求
    try {
      const ajaxData = await getFornecedores2();
      // 这里可以使用返回的entnm和entcd
      console.log("AJAX获取的数据:", ajaxData);
    } catch (err) {
      console.error("AJAX请求失败:", err);
    }
  };

  fetchAllData();
}, []); // 空依赖数组确保只在DOM加载时调用一次

额外的排查要点 #

1. 检查服务器端的CORS配置：
   必须确保服务器返回Access-Control-Allow-Origin响应头，值为你的前端域名（比如http://localhost:3000），开发环境可以临时用*，但生产环境一定要指定具体域名。如果是复杂请求（比如带自定义头、非GET/POST方法），服务器还要正确处理OPTIONS预检请求。

2. 查看浏览器网络请求详情：
   打开Chrome开发者工具的「Network」标签，找到对应的请求，查看：

   • 状态码：是否是404（接口不存在）、500（服务器错误）、403（权限问题）
   • 响应头：是否有正确的CORS头
   • 请求头：确认没有多余的错误头

3. 检查请求URL的正确性：
   确认config.web_service_url没有拼写错误，服务器是否正常运行，接口路径/TM_GetEnt?pEntTp=F是否正确。

4. 排查请求中止的原因：
   Axios的「请求中止」错误可能是因为：

   • 服务器超时未响应（所以我们加了timeout配置）
   • 浏览器插件（如广告拦截器）阻止了请求
   • 服务器主动断开了连接

内容的提问来源于stack exchange，提问作者Inês Borges