如果你正在使用 AngularJS 进行 AJAX 请求，而且经常遇到返回 404 错误的情况，那么这篇文章就是为你准备的。本文将解释这个问题的原因，并提供几种解决方案。
问题原因
通常情况下，当我们在一个 AngularJS 应用程序中发起 AJAX 请求时，该请求会通过 $http 或 $resource 服务发送出去。这些服务生成的请求 URL 默认是相对于当前网站的根目录的。例如：
$http.get('/my-api-endpoint');这将生成一个指向 http://yoursite.com/my-api-endpoint 的 URL。
但是，在一些情况下，这个 URL 会被修改或替换。例如，如果你在 AngularJS 应用程序的任何一部分中使用了 base 标签：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ------------------- --------- --------- ----------- ------- ----- --------------- ---- --- --- ------- -------
这将把所有相对路径 URL 解析为 http://yoursite.com/some/path/my-api-endpoint。
同样的问题也会发生在需要添加虚拟路径的情况下。例如，如果你的应用程序使用 ASP.NET MVC，而且运行在 http://yoursite.com/myapp 上，那么你需要把所有相对路径解析为 http://yoursite.com/myapp/my-api-endpoint。
解决方案
解决方案 1：使用绝对路径
最简单的解决方案是使用绝对路径代替相对路径。例如：
$http.get('http://yoursite.com/my-api-endpoint');这将生成一个指向 http://yoursite.com/my-api-endpoint 的绝对路径 URL，不会受到任何 base 标签或虚拟路径的影响。
解决方案 2：使用 $location
另一种解决方案是使用 AngularJS 的 $location 服务，该服务提供有关当前 URL 的信息。例如：
$http.get($location.protocol() + '://' + $location.host() + '/my-api-endpoint');
这将根据当前的协议和主机名生成一个指向 http://yoursite.com/my-api-endpoint 的 URL。
解决方案 3：使用 $baseHref
还有一种解决方案是使用 $baseHref 变量。这个变量包含由 base 标签指定的路径。例如：
$http.get($baseHref + '/my-api-endpoint');
这将动态地生成一个指向正确路径的 URL。注意，如果你的应用程序没有使用 base 标签，那么这种解决方案将无效。
示例代码
下面是一个包含上述解决方案中所有代码的示例：
-- -------------------- ---- -------
----------------------- ---
--------------------- --------------- ---------- ---------- -
-- ---- --------
------------------------------------------------
------------------------ -
---------------------------
---
-- ---- ---- ---------
------------------------------ - ----- - ---------------- - -------------------
------------------------ -
---------------------------
---
-- ---- ---- ---------
------------------- - -------------------
------------------------ -
---------------------------
---
---结论
解决 AngularJS AJAX 404 错误的问题可能有点棘手，但本文提供了三种可行的解决方案，你可以根据自己的需求进行选择。记住，保持你的 URL 简单和清晰，不要让它们受到任何干扰。祝您好运！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674d7dab89eced3c403c15a3