reactjs - .NET webapi 端点在 Postman 中工作，但 Chrome 给出了 net::ERR_FAILED

Question

我在使用 React 和 TypeScript 从 webapi (.Net Core 3.0.100) 获取数据时遇到问题。webapi 项目有一个端点，http://localhost:5000/api/values。我可以直接在 Chrome 中浏览到这个 URL 并查看数据，我也可以在 Postman 中成功访问端点。

在我的 root/[React-app]/App.tsx 文件夹中，我有以下代码:

  state = {
    values: [],
  };


  componentDidMount() {
    axios.get('http://localhost:5000/api/values').then((response) => {
      console.log(response);
      this.setState({
        values: [
          { id: 1, name: 'Value 101' },
          { id: 2, name: 'Value 102' },
        ],
      });
    });
  }

当我转到主机上的 localhost:3000 时，控制台无法访问“值”，状态为(失败)并给出以下错误:GET http://localhost:5000/api/values net::ERR_FAILED

当我展开错误时，第一行在 xhr.js 下的“dispatchXhrRequest”中显示错误

request.send(requestData)下面有红色下划线

  request.send(requestData);
  });
};

我完全迷路了，我可以访问任何其他端点，例如 jsonplaceholder.typicode.com/posts使用上面相同的代码，但不是 http://localhost:5000/api/values

如何解决这个问题？我已经尝试了 2 天，但无法解决，因此需要社区的帮助。

项目详情:

与 typescript react react v17.0.1.Net 核心 3.0.1003 个类库(应用程序、域、持久性)1个网络接口(interface)(API)

我已经广泛检查了其他问题，它们似乎要么对旧版本的 React 和/或 .Net Core 有回应，要么没有解决这个特定问题。

Answer 1

在 Startup.CS 中，我必须将以下内容添加到 ConfigureServices 方法中:

public void ConfigureServices(IServiceCollection services)     
services.AddCors(opt => 
                {
                     opt.AddPolicy("CorsPolicy", policy => 
                     {
                         policy.AllowAnyHeader().AllowAnyMethod().WithOrigins("http://localhost:3000");
                     });
                });

并将以下内容添加到 Configure 方法中:

 public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
 app.UseCors("CorsPolicy");

感谢 ABOS 链接到一个对解决方案有提示的问题。