如何使用 React 查詢從 Web API 獲取數據？

Question

這可能是一個重復的問題。

我將 react 用於前端，將 asp.net 核心 Web API 用於后端。 我嘗試使用反應查詢來獲取數據，但出現了這樣的錯誤。

從源“https://localhost:3000”訪問“https://localhost:7036/api/{Controller Name}/{Action}”的 XMLHttpRequest 已被 CORS 策略阻止：否“Access-Control-Allow-” Origin' 標頭存在於請求的資源上。

現在，我在這篇文章中看到了針對此錯誤的類似答案Access to XMLHttpRequest at '...' from origin 'localhost:3000' has been blocked by CORS policy但是，我想知道是否有任何標准或更高級別使用反應查詢解決這個問題的方法？

控制器和動作

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

Answer 1

這不是反應問題。 這是瀏覽器實現的安全措施。 您需要在您的 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 步並為應用程序中的所有 Web API 控制器全局啟用它。

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