使用Axios调用Swagger生成的EF API报错，请求排查（附代码）

先修正代码中的基础问题 #

你的代码存在语法和逻辑缺陷，这会导致函数无法正常执行或触发：

• FetchAPI组件的return语句后无内容，组件无法渲染任何元素，也无法触发fetchAPI函数
• 缺少错误捕获逻辑，无法获取具体错误详情

修正后的代码示例：

import axios from 'axios';

const FetchAPI = () => {
    const fetchAPI = () => {
        axios.get("https://localhost:7270/api/Product")
        .then((response)=>{
            console.log(response);
        })
        .catch((error)=>{
            // 打印完整错误信息用于排查
            console.error("请求失败:", error);
            console.error("错误详情:", error.response?.data || error.message);
        })
    }

    // 添加触发按钮，否则fetchAPI不会被调用
    return (
        <button onClick={fetchAPI}>获取产品数据</button>
    );
}

export default FetchAPI;

常见错误原因及排查步骤 #

• 跨域（CORS）限制：前端运行在http://localhost:3000，API在https://localhost:7270，属于不同端口，浏览器会拦截跨域请求。解决方式：
  在EF Core API项目的Program.cs中配置CORS：

  builder.Services.AddCors(options =>
  {
      options.AddPolicy("AllowLocalhost3000",
          policy => policy.WithOrigins("http://localhost:3000")
                          .AllowAnyHeader()
                          .AllowAnyMethod());
  });
  
  app.UseCors("AllowLocalhost3000");
  

• API地址/端口错误：直接在浏览器地址栏访问https://localhost:7270/api/Product，确认API是否正常运行并返回数据
• HTTPS证书问题：若API使用自签名证书，浏览器会拒绝信任。可暂时改用HTTP（若API支持），或手动在浏览器中信任该证书
• 端点路径错误：核对Swagger文档，确认/api/Product是正确的端点，检查拼写、大小写或复数形式是否匹配

调试技巧 #

• 打开浏览器开发者工具（F12），切换到Network标签，查看请求的状态码、响应头及内容
• 利用catch块打印完整error对象，Axios会提供error.response（API返回的错误数据）、error.request（请求实例）和error.message（错误描述）

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