如何使用React查询从Web API获取数据？

发布于 2025-01-30 18:11:08 字数 1386 浏览 5 评论 0原文

这可能是一个重复的问题。

我正在为前端和ASP.NET Core Web API使用React用于后端。我尝试使用React查询获取数据，但有这样的错误。

在'https：// localhost：7036/api/{控制器名称}/{action}'https：// localhost：3000'已被CORS策略阻止：no访问contescon-controlol' -Allow-Origin'Header存在于请求的资源上。

现在，我在此帖子中看到了类似的答案访问xmlhttprequest的访问权限Localhost：3000'被CORS政策所阻止但是，我想知道使用React Query有任何标准或优越的方法来解决此问题吗？

控制器和操作

[Route("api/[controller]")]
[ApiController]
  public class GeneralController : ControllerBase {

       public JsonResult GetMatureVerifyData() // Action Method
         {
            using(var model = new MatureVerifiedDataDTO()){

                  return new JsonResult(model);

                }
          }
  }

反应查询代码

import axios from "axios";
import { useQuery } from "react-query";

export const APIcall = () => {
    const { isLoading, error, } = useQuery("verify", () =>
         axios.get(
            "https://localhost:7036/api/General/GetMatureVerifyData"
        ).then((res) => console.log(res.data))
    );

    if (isLoading) {
        console.log("Loading...");
    };

    if (error) {
        console.log(`An error has occurred: ${error.message}`);
    }
}

原文

This may be a duplicate question.

I'm using react for frontend and asp.net core Web API for backend. I tried to fetch data using react query but got an error like this.

Access to XMLHttpRequest at 'https://localhost:7036/api/{Controller Name}/{Action}' from origin 'https://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Now, I have seen a similar answer for this error, in this post
Access to XMLHttpRequest at '...' from origin 'localhost:3000' has been blocked by CORS policy
But, I would like to know is there any standard or superior way to solve this using react query ?

Controller and Action

[Route("api/[controller]")]
[ApiController]
  public class GeneralController : ControllerBase {

       public JsonResult GetMatureVerifyData() // Action Method
         {
            using(var model = new MatureVerifiedDataDTO()){

                  return new JsonResult(model);

                }
          }
  }

React Query Code

import axios from "axios";
import { useQuery } from "react-query";

export const APIcall = () => {
    const { isLoading, error, } = useQuery("verify", () =>
         axios.get(
            "https://localhost:7036/api/General/GetMatureVerifyData"
        ).then((res) => console.log(res.data))
    );

    if (isLoading) {
        console.log("Loading...");
    };

    if (error) {
        console.log(`An error has occurred: ${error.message}`);
    }
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

伴我老 2025-02-06 18:11:08

这不是反应问题。这是浏览器实施的安全措施。您需要启用cors 在您的ASP.NET Web API项目中，允许https：// localhost：3000。

webapiconfig.cs

public static void Register(HttpConfiguration config)
{
   config.EnableCors();
}

接下来，将[enablecors]属性添加到控制器类：

[EnableCors(origins: "https://localhost:3000", headers: "*", methods: "*")]
public class GeneralController : ControllerBase {

您还可以跳过步骤2＆amp;为应用程序中的所有Web API控制器启用全球。

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        var cors = new EnableCorsAttribute("https://localhost:3000", "*", "*");
        config.EnableCors(cors);
        // ...
    }
}

This is not a react issue. This is a security measure implemented by browsers. You need to enable cors in your asp.net web api project to allow https://localhost:3000.

WebApiConfig.cs

public static void Register(HttpConfiguration config)
{
   config.EnableCors();
}

Next, add the [EnableCors] attribute to the Controller class:

[EnableCors(origins: "https://localhost:3000", headers: "*", methods: "*")]
public class GeneralController : ControllerBase {

You can also skip step 2 & enable it globally for all Web API controllers in your application.

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        var cors = new EnableCorsAttribute("https://localhost:3000", "*", "*");
        config.EnableCors(cors);
        // ...
    }
}

回复收藏 0 原文

~没有更多了~