ASP.NET 尝试添加新控制器时出现 React 错误:您需要启用 JavaScript 到 运行 此应用
ASP.NET with React error when trying to add a new controller: You need to enable JavaScript to run this app
这似乎是一个简单的问题,但我根本想不通。我已经按照 React/ASP.NET quick start guide on docs.microsoft.com 进行操作,我可以按照他们详细说明的那样让一切正常工作。我卡住的地方是创建任何新路线。
我从 Visual Studio 模板“API 具有 read/write 操作的控制器”添加了一个新控制器:
那我试试这条路线:
我尝试使用与从 React 应用程序到后端服务器的现有有效提取调用相同的方法对其进行测试:
// The example used in the tutorial and it works OK:
const response = await fetch('weatherforecast');
const data = await response.json();
this.setState({ forecasts: data, loading: false });
// I have imitated this to send a fetch to the "api/test3" route, which doesn't work
const response = await fetch('api/test3');
const data = await response.json();
this.setState({ forecasts: data, loading: false });
但我无法弄清楚一个失败和一个正常工作有什么不同。我更新了 setupProxy.js
文件并添加了新路线:
const { createProxyMiddleware } = require('http-proxy-middleware');
const context = [
"/weatherforecast",
"/test",
"/api",
"/api/test",
"/api/test3",
"/test2",
];
module.exports = function (app) {
const appProxy = createProxyMiddleware(context, {
target: 'https://localhost:7236',
secure: false
});
app.use(appProxy);
};
我也尝试将这些添加到我的 package.json
:
"private": true,
"proxy": "https://localhost:7236",
我还尝试用教程中工作 WeatherForecastController.cs
中的相同脚本替换新控制器中的所有脚本。这给出了同样的错误。
当我重新启动 Visual Studio 时,问题自行解决(就像变魔术一样)。我已经尝试过一两次,所以也许我所做的其中一项更改有助于解决问题:
- 将此添加到
package.json
"private": true,
"proxy": "https://localhost:7236",
- 确保
setupProxy.js
更新为必要的端点,如上所述。
其他我没有尝试过,但也可能解决了我的问题的解决方案:
- 根据this solution
删除服务工作者
我不得不说我已经浪费了很多时间来尝试调试 Visual Studio 和 .NET 问题,结果发现问题通过重新启动 Visual Studio 得到解决。如果有一个button/feature重新加载VisualStudio会很方便;删除缓存;并做任何其他必要的事情来编译我当前的代码。如果有人知道请告诉我。
这似乎是一个简单的问题,但我根本想不通。我已经按照 React/ASP.NET quick start guide on docs.microsoft.com 进行操作,我可以按照他们详细说明的那样让一切正常工作。我卡住的地方是创建任何新路线。
我从 Visual Studio 模板“API 具有 read/write 操作的控制器”添加了一个新控制器:
那我试试这条路线:
我尝试使用与从 React 应用程序到后端服务器的现有有效提取调用相同的方法对其进行测试:
// The example used in the tutorial and it works OK:
const response = await fetch('weatherforecast');
const data = await response.json();
this.setState({ forecasts: data, loading: false });
// I have imitated this to send a fetch to the "api/test3" route, which doesn't work
const response = await fetch('api/test3');
const data = await response.json();
this.setState({ forecasts: data, loading: false });
但我无法弄清楚一个失败和一个正常工作有什么不同。我更新了 setupProxy.js
文件并添加了新路线:
const { createProxyMiddleware } = require('http-proxy-middleware');
const context = [
"/weatherforecast",
"/test",
"/api",
"/api/test",
"/api/test3",
"/test2",
];
module.exports = function (app) {
const appProxy = createProxyMiddleware(context, {
target: 'https://localhost:7236',
secure: false
});
app.use(appProxy);
};
我也尝试将这些添加到我的 package.json
:
"private": true,
"proxy": "https://localhost:7236",
我还尝试用教程中工作 WeatherForecastController.cs
中的相同脚本替换新控制器中的所有脚本。这给出了同样的错误。
当我重新启动 Visual Studio 时,问题自行解决(就像变魔术一样)。我已经尝试过一两次,所以也许我所做的其中一项更改有助于解决问题:
- 将此添加到
package.json
"private": true,
"proxy": "https://localhost:7236",
- 确保
setupProxy.js
更新为必要的端点,如上所述。
其他我没有尝试过,但也可能解决了我的问题的解决方案:
- 根据this solution 删除服务工作者
我不得不说我已经浪费了很多时间来尝试调试 Visual Studio 和 .NET 问题,结果发现问题通过重新启动 Visual Studio 得到解决。如果有一个button/feature重新加载VisualStudio会很方便;删除缓存;并做任何其他必要的事情来编译我当前的代码。如果有人知道请告诉我。