无法触发ASP控制器与获取React

kmbjn2e3  于 2024-01-09  发布在  .NET
关注(0)|答案(3)|浏览(120)

我尝试从React触发一个ASP控制器。我测试了很多不同的东西。但都不起作用。有时我会在浏览器中收到路由不存在的消息(我尝试了很多路由)或“没有路由匹配位置“/DataController/alldata”。最后一次我收到消息“启用验证第一个证书”。(来自Postman)
当前代码:
ASP控制器

  1. [Authorize]
  2. [ApiController]
  3. [Route("[controller]")]
  4. public class DataController : Controller {
  5. ...
  6. [HttpGet]
  7. [Route("alldata")]
  8. public IActionResult GetData(){
  9. var data = new {key1="test1", key2="test2"};
  10. return Ok(data)
  11. }

字符串
React Code(fetch)

  1. export const GetDataset = function () {
  2. const fetchData = async() => {
  3. try {
  4. const result = await fetch('https://localhost:port/DataController/alldata')
  5. const jTest = await result.json();
  6. }catch(error){
  7. .....
  8. }
  9. }
  10. fetchData()
  11. }


React组件调用

  1. componentDidMount() {
  2. GetDataset();
  3. }

bfnvny8b

bfnvny8b1#

当您在路由中使用[controller]时,这意味着控制器类的名称 * 减去单词Controller*。
所以你的URL应该是这样的:https://localhost:port/Data/alldata

6yjfywim

6yjfywim2#

你可以尝试把它添加到你的program.cs文件中:

  1. app.UseAuthentication();
  2. app.UseAuthorization();

字符串
请注意,它必须按照这个顺序。

u5i3ibmn

u5i3ibmn3#

我测试了很多不同的东西。但都不起作用。有时我会在浏览器中得到路由不存在的消息(我尝试了很多路由)或“没有路由匹配的位置“/DataController/alldata”。
好吧,根据你共享的代码片段和描述,我已经尝试重现你的问题,我能够击中控制器端点并得到相应的响应。
尽管如此,你的代码看起来很好,我只是省略了[Authorize],因为我不需要它来执行我的测试场景。
下面是我从react端点调用API的步骤:
控制器:
和你的差不多:

  1. [Route("[controller]")]
  2. [ApiController]
  3. public class DataController : ControllerBase
  4. {
  5. [HttpGet]
  6. [Route("alldata")]
  7. public IActionResult GetData()
  8. {
  9. var data = new { key1 = "test1", key2 = "test2" };
  10. return Ok(data);
  11. }
  12. }

字符串
Program.cs文件:
在program.cs文件中,我配置了CORS设置:

  1. var builder = WebApplication.CreateBuilder(args);
  2. // Add services to the container.
  3. builder.Services.AddControllers();
  4. builder.Services.AddEndpointsApiExplorer();
  5. builder.Services.AddSwaggerGen();
  6. builder.Services.AddCors(options =>
  7. {
  8. options.AddPolicy("AllowOrigin",
  9. builder => builder.WithOrigins("YourReactEndpoint")
  10. .AllowAnyHeader()
  11. .AllowAnyMethod());
  12. });
  13. var app = builder.Build();
  14. if (app.Environment.IsDevelopment())
  15. {
  16. app.UseSwagger();
  17. app.UseSwaggerUI();
  18. }
  19. app.UseHttpsRedirection();
  20. app.UseAuthorization();
  21. app.UseCors("AllowOrigin");
  22. app.MapControllers();
  23. app.Run();


React测试代码:
我在react中使用了以下方法进行快速测试:

  1. import React, { useEffect, useState } from 'react';
  2. export function App(props) {
  3. const [data, setData] = useState(null);
  4. const [error, setError] = useState(null);
  5. useEffect(() => {
  6. const fetchData = async () => {
  7. try {
  8. const response = await fetch('https://localhost:7299/Data/alldata');
  9. if (!response.ok) {
  10. throw new Error('Network response was not ok');
  11. }
  12. const result = await response.json();
  13. console.log(result);
  14. setData(result);
  15. } catch (error) {
  16. setError(error);
  17. }
  18. };
  19. fetchData();
  20. }, []);
  21. return (
  22. <div className='App'>
  23. </div>
  24. );
  25. }


输出量:
x1c 0d1x的数据


**注:**如需参考,请refer to this example

展开查看全部

相关问题