ASP.NET MVC中Fetch API从Index视图正常路由，Found视图路由异常

问题出在相对路径的解析逻辑上：

• 从Index.cshtml调用时，若该页面的访问URL是网站根路径（如http://yourdomain/）或/Home/Index，浏览器会把相对路径"api/SaveNewBool"解析为根目录下的API地址http://yourdomain/api/SaveNewBool，和你的属性路由完全匹配，因此请求正常。
• 而Found.cshtml的访问URL是/Home/Found，浏览器会将相对路径"api/SaveNewBool"解析为当前路径的子路径，也就是/Home/api/SaveNewBool，这和你定义的属性路由不匹配，自然返回404错误。

有几种可靠的方式可以彻底解决这个问题：

1. 使用根相对路径 #

直接在Fetch的URL前加上/，强制浏览器从网站根目录开始解析路径：

fetch('/api/SaveNewBool', {
  method: 'POST',
  // 其他请求配置（如headers、body等）
})

这种方式简单直接，适合路由规则固定的场景。

2. 用MVC Url助手生成正确路径 #

在视图中借助ASP.NET MVC的Url.Action或Url.RouteUrl生成匹配属性路由的路径，再传给JavaScript：

<script>
// 方式1：指定控制器和动作
const apiUrl = '@Url.Action("SaveNewBool", "Demo")';
// 方式2：直接匹配路由名称（若给属性路由指定了name）
// const apiUrl = '@Url.RouteUrl("SaveNewBoolRoute")';

fetch(apiUrl, {
  method: 'POST',
  // 其他请求配置
})
</script>

这种方式能自动适配网站部署环境（比如部署在虚拟目录下），避免硬编码路径带来的问题。

3. 全局配置网站根路径变量 #

在布局页中定义全局的根路径变量，所有视图统一复用：

<!-- 在_Layout.cshtml中添加 -->
<script>
window.siteRoot = '@Url.Content("~/")';
</script>

之后在Found.cshtml中使用：

fetch(window.siteRoot + 'api/SaveNewBool', {
  method: 'POST',
  // 其他请求配置
})

这种方式适合需要多处调用API的项目，便于统一维护路径规则。

内容的提问来源于stack exchange，提问作者Peter