如何将 Asp.Net Core WebApi 与 React.js 集成？

Question

我有一个带有 Asp.net 核心 WebApi 和 React.js 的项目，当我在 IIS 服务器上发布时，它的后端和前端正在独立运行（前端使用 Inte.net 调用后端 API）

但我想在 VisualStadio 中使用 Asp.NetCore 和 ReactApp 模板，将 LocalHost 上的那些和前端调用 Apis 与相同的应用程序集成。 VS模板

我在本地使用 ClientApp(FrontEnd) 调用 WebApis 时遇到一些问题。 ClientApp在本地调用WebApis如何解决？

那是我的 JSCode，它与 WebApis 连接：

import axios from "axios" 
import { BaseUrl } from "../utils/baseUrl"

const useRequest = ({ url, method, body }) => {
    const doReq = async () => {
        const token = localStorage.getItem("accessToken")
        const res =await axios(`${BaseUrl}/${url}`, {
            method: method,
            headers: {
                "Content-Type": "application/json"  ,
                "accept": "*/*",
                'Authorization':`Bearer ${token}`
            },                                   
           data : body
        })
        return res
    }
    return doReq
}
export default useRequest;

和基地 Url：

export const BaseUrl = "http://localhost:44789"

我在后端的午餐设置：

{
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:44789",
      "sslPort": 44367
    }
  },
  "profiles": {
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "Project2": {
      "commandName": "Project",
      "launchBrowser": true,
      "applicationUrl": "https://localhost:5001;http://localhost:5000",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

Answer 1

这是示例https://github.com/unpub777/PersonalPortal （我将其用作模板。）我认为您可以根据附加的回购协议调整现有代码中的某些内容。

Answer 2

你不需要像上面那样在js文件中使用baseUrl，url就足够了，url必须是你在startup.cs中声明的endPoint路由+Http function你想要访问的名称。