One*_*ind 2 reactjs asp.net-core visual-studio-2022
我构建了一个运行 Windows 11 的虚拟机并安装了 VS 2022 来使用它。我知道我不是第一个遇到这个问题的人，但我似乎找不到任何关于如何让它工作的信息。
我确实使用 React 应用程序创建了一个开箱即用的 ASP.NET Core。我添加了一个新控制器
using Microsoft.AspNetCore.Mvc;
namespace Zignificant.WebApp.Controllers
{
[ApiController]
[Route("api/[controller]")]
public class TestController : ControllerBase
{
[HttpGet]
public IActionResult Get()
{
return Ok("test");
}
}
}
当我启动应用程序时，我可以轻松点击 PostMan 内置的天气控制器。但是，当我尝试在新的测试控制器上执行 HttpGet 时，我得到以下信息：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<base href="/" />
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="/manifest.json">
<link rel="shortcut icon" href="/favicon.ico">
<!--
Notice the use of in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Zignificant.WebApp</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script src="/static/js/bundle.js"></script>
<script src="/static/js/vendors~main.chunk.js"></script>
<script src="/static/js/main.chunk.js"></script>
</body>
</html>
我尝试删除测试控制器上路线的“api”部分，认为它妨碍了但什么也没有。
这实际上是开箱即用的应用程序模板。
还有其他人看到这个问题吗？或者我错过了什么？
预先感谢您的帮助！
更新 #1：我检查 launchSetting.json 并注意到原始端口或 7008：
{
"iisSettings": {
"windowsAuthentication": false,
"anonymousAuthentication": true,
"iisExpress": {
"applicationUrl": "http://localhost:2817",
"sslPort": 44302
}
},
"profiles": {
"Zignificant.WebApp": {
"commandName": "Project",
"launchBrowser": true,
"applicationUrl": "https://localhost:7008;http://localhost:5008",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development",
"ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.AspNetCore.SpaProxy"
}
},
"IIS Express": {
"commandName": "IISExpress",
"launchBrowser": true,
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development",
"ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.AspNetCore.SpaProxy"
}
}
}
}
我将端口更改为 launchSettings.json 文件中指示的端口，并且调用 API 似乎可以在 PostMan 中工作。
但是，当我尝试从 React 应用程序获取数据时，这仍然没有帮助。这样做会给我带来 CORS 错误。
仍在尝试理解这一点...似乎代理端口导致了某种我无法弄清楚的问题。任何帮助表示赞赏。
更新 #2 因此，显然您已经在 setupProxy.js 文件中添加了您计划在 React 应用程序中使用的任何新控制器：
const createProxyMiddleware = require('http-proxy-middleware');
const { env } = require('process');
const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :
env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'http://localhost:2817';
const context = [
"/weatherforecast",
"/api/test"
];
module.exports = function(app) {
const appProxy = createProxyMiddleware(context, {
target: target,
secure: false
});
app.use(appProxy);
};
我觉得这样做有点过分了。然而，我的态度是开放的，微软过去的结果让我感到惊讶，我认为这是一种矫枉过正的结果。
我想听听某人使用这种方法的好处。再次感谢你的帮助。
在将控制器添加到 Visual Studio 2022“开箱即用”.NET Core React SPA 模板时，我遇到了同样的问题。为了让它工作，我所做的就是找到该文件setupProxy.js，该文件在当前模板中位于：ClientApp\src\setupProxy.js。在此文件中，我添加了到新控制器的路由：
const context = [
"/weatherforecast",
"/api/test"
];
通过这个简单的添加，我能够点击控制器操作并返回有效的响应。我没有在任何地方找到这个记录，但它对我有用。
| 归档时间： |
|
| 查看次数： |
1139 次 |
| 最近记录： |