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

Question

我有一个带有 Asp.net Core WebApi 和 React.js 的项目，当我在 IIS 服务器上发布时，它的后端和前端是运行独立的很好（前端使用 Internet 调用后端蜜蜂）

但我想在 VisualStadio 中使用 Asp.NetCore 和 ReactApp 模板来集成这些和具有相同应用程序的 LocalHost 上的前端调用 Apis。 VS template

我在本地使用 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（我将其用作模板。）我认为您可以根据附加的 repo 调整现有代码中的某些内容。

Answer 2

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

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

how can I Integrate Asp.Net Core WebApi With React.js?

c#

visual-studio

reactjs

asp.net-core

asp.net-core-webapi