MVC路由不工作C#后端反应前端
我不熟悉.Net的MVC。我有一个C#控制器,如下所示:MVC路由不工作C#后端反应前端,c#,.net,reactjs,api,model-view-controller,C#,.net,Reactjs,Api,Model View Controller,我不熟悉.Net的MVC。我有一个C#控制器,如下所示: namespace TFL.Controllers { [Route("api/[controller]")] public class TubeApiController : Controller { [HttpGet("[action]")] public async Task<IActionResult> GetTubeStatus() {
namespace TFL.Controllers
{
[Route("api/[controller]")]
public class TubeApiController : Controller
{
[HttpGet("[action]")]
public async Task<IActionResult> GetTubeStatus()
{
using (var client = new HttpClient())
{
try
{
client.BaseAddress = new Uri("https://api.tfl.gov.uk");
var response = await client.GetAsync("/Line/Mode/tube/Status");
response.EnsureSuccessStatusCode();
var stringResult = await response.Content.ReadAsStringAsync();
var rawData = JsonConvert.DeserializeObject<List<RootObject>>(stringResult);
return Ok(new
{
LineId = rawData[0].name
});
}
catch (HttpRequestException httpRequestException)
{
return BadRequest("Error getting data");
}
}
}
}
public class RootObject
{
[JsonProperty("name")]
public string name { get; set; }
public List<LineStatus> lineStatuses { get; set; }
}
public class LineStatus
{
public string statusSeverityDescription { get; set; }
}
}
所以问题是,基本上你没有提到绝对url,你使用的是相对url。在这种情况下,您需要知道哪个端口是m后端正在运行 由于您的.net应用程序服务器在5000中运行,您需要在react应用程序的package.json中指出它,以便使用相对url 因此,在您的package.json中,在浏览器列表下方添加并重新启动您的应用程序。因为如果您在package.json中做了任何更改,您需要重新启动,那么只会反映新的更改
"proxy": "http://localhost:5000"
在代码
fetch(“api/tubeapi/gettubestatus”)
中使用并检查,希望您能够看到响应。您是否正在包中执行代理。json?因此,让我总结一下,您的后端.net运行时间为5000,而您的react运行时间为3000。我是否正确,请添加react应用程序的package.json。抱歉@DILEEPTHOMAS,我不太明白。我将编辑我的答案以显示我的包。json您没有代理,因此当您调用api时,api/tubeapi/gettubestatus您不会添加,因为您的服务器在该端口中运行感谢@DILEEPTHOMAS-我如何修复此问题?@DILEEPTHOMAS即使我将api调用更改为“”还是不行?谢谢@DILEEPTHOMAS,但我不确定这是问题所在。我在浏览器列表下添加了这一行,并修改了获取请求,重新启动了应用程序,但控制台中仍然没有任何内容:(当你尝试在chrome中点击时,你是否得到responseeyes@DILEEPTHOMAS I get:{lineId:“Bakerloo”}
这是我期望看到的内容,那么这应该可以工作了吗?你重新启动了react应用程序了吗(@DILEEPTHOMAS)
{
"name": "tfl",
"version": "0.1.0",
"private": true,
"dependencies": {
"babel-eslint": "10.0.1",
"bootstrap": "^4.1.3",
"jquery": "^3.4.1",
"merge": "^1.2.1",
"oidc-client": "^1.9.0",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-router-bootstrap": "^0.24.4",
"react-router-dom": "^4.2.2",
"react-scripts": "^3.0.1",
"reactstrap": "^6.3.0",
"rimraf": "^2.6.2"
},
"devDependencies": {
"ajv": "^6.9.1",
"cross-env": "^5.2.0",
"eslint": "^5.12.0",
"eslint-config-react-app": "^4.0.1",
"eslint-plugin-flowtype": "^2.0.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.11.1",
"typescript": "^3.5.2"
},
"eslintConfig": {
"extends": "react-app"
},
"scripts": {
"start": "rimraf ./build && react-scripts start",
"build": "react-scripts build",
"test": "cross-env CI=true react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"lint": "eslint ./src/"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
"proxy": "http://localhost:5000"