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

Question

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

我使用react为前端和asp.net核心Web API为后端。我尝试使用react查询获取数据，但得到了这样的错误。

从源'https://localhost:3000'访问'https://localhost:7036/api/{Controller Name}/{Action}'的XMLHttpRequest已被CORS策略阻止:请求的资源上没有'Access- control - allow - origin '标头。

现在，我在这篇文章中看到了关于这个错误的类似答案访问XMLHttpRequest '…'From origin 'localhost:3000'已被CORS政策阻止但是，我想知道是否有任何标准或优越的方法来解决这个使用react查询?

控制器和动作

[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}`);
}
}

Answer 1

这不是react的问题。这是一种由浏览器实现的安全措施。您需要在asp.net web api项目中启用cors以允许https://localhost:3000。

WebApiConfig.cs

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

接下来，将[EnableCors]属性添加到Controller类:

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

你也可以跳过第2步&全局启用

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