AngularJS中的404错误

Posted

技术标签:

【中文标题】AngularJS中的404错误【英文标题】:404 Error In AngularJS 【发布时间】:2013-09-01 13:04:07 【问题描述】:

您好,我是 AngularJS 的新手。我从this tutorial 开始。在教程中$http.get 方法正在调用 JSON 文件。就我而言,我总是收到 404 错误。 JSON 文件的位置也与 html 文件相关。但总是遇到同样的错误。

这是我的代码: index.html:

<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
  <title>My HTML File</title>
  <script src="angular.js"></script>
  <script src="controllers.js"></script>
</head>
<body ng-controller="PhoneListCtrl">
 Total Number of phones: phones.length
 Search: <input ng-model="query">
 Sort by:
<select ng-model="orderProp">
  <option value="name">Alphabetical</option>
  <option value="age">Newest</option>
</select>
<div>
  <ul>
    <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
  phone.name
  <p>phone.snippet</p>
    </li>
  </ul>
</div>

</body>
</html>

controllers.js

function PhoneListCtrl($scope, $http) 
$http.get('phones.json').success(function(data)
$scope.phones = data;
).
error(function(data, status, headers, config) 
alert('data = ' + data + ' status = ' + status);
);

同一目录下的所有文件(index.html、controllers.js、phones.json)。我在这里想念什么?为什么会抛出 404 错误?

以下是浏览器截图: 1

【问题讨论】:

打开 firebug 看看它从哪里获取你的 json。 尝试使用pull 路径的绝对网址 这可能与您的 Web/应用程序服务器的设置方式有关。您使用哪个服务器环境?你能显示你的目录结构吗?您可以使用浏览器或 curl 访问该文件吗? @gae123 我正在使用简单的 html 文件。没有任何 Web/App 服务器。是的,我可以通过浏览器访问这个 JSON 文件。但无法通过教程访问。 【参考方案1】:

文件是否在同一目录中无关紧要。您需要一个服务器来托管文件并响应 GET、POST PUT 和其他 http 请求。

本教程的第一步要求您设置服务器。请参阅tutorial 中标题为“使用代码”的部分。也请参阅该步骤的 cmets / 讨论以获取有关设置服务器的更多信息。

如果 nodeJs 似乎太难使用,那么一个简单的 Python 服务器也可以。您也可以使用 Apache / WAMP / XAMP 服务器。

如果没有设置服务器,您将无法构建教程中描述的应用程序,因为 http 请求将失败 - 404 错误因此很明显。

【讨论】:

【参考方案2】:

刚看到这个。我认为问题在于您的 Web 服务器未配置为服务器 JSON MIME 类型。如果您使用的是 IIS Express(和 Visual Studio),请查看如何将 JSON MIME 类型添加到 IIS。

http://michaellhayden.blogspot.ca/2012/07/add-json-mime-type-to-iis-express.html

【讨论】:

【参考方案3】:

需要将 JSON 的 MIME 类型添加到 IIS 服务器。

对于 IIS,请访问您的网站,然后输入 MIME 并添加

文件扩展名:.json

MIME 类型:application/x-javascript

【讨论】:

【参考方案4】:

问题与角度无关,这意味着您请求的文件不在您(或您的脚本)认为的位置。 根据您使用的浏览器,例如在 chrome 中,打开检查器(右键单击,检查元素)并在 404 错误中的控制台中检查您的应用程序尝试获取的文件的完整路径,然后检查您的服务器你实际上在那个目录中有那个文件。您还可以在网络选项卡中查看应用程序发出的每个请求,以获取有关问题可能原因的更多信息。 我看到您没有使用服务器,那么您的地址栏应该显示类似 file:///path/to/index.html 的内容,并且带有 404 错误的文件可能具有类似 file:///angular.js 的路径,应该是 file:///path/to/angular.js编辑:如果带有404的文件是file:///angular.js,则表示浏览器正在系统根目录而不是当前目录中查找文件,请尝试使用&lt;script src="./angular.js"&gt;&lt;/script&gt;等相对路径。 我还认为您对phones.json 的ajax 请求会有跨源请求 问题。这就是为什么我建议您改为设置本地服务器。

【讨论】:

我认为不是文件路径的问题。我也检查了检查员。它试图在它存在的正确目录中读取。但是当我们在服务器上运行它时它起作用了。请参阅随附的屏幕截图。您对此有何评论? 您应该继续使用服务器进行开发,它会尝试向不允许的file://.. 地址发出 ajax OPTIONS 请求。出于安全原因,只允许 http 请求。想象一个网页获取您磁盘上的任何文件。【参考方案5】:

您的 html 文件中没有包含任何模块。

【讨论】:

以上是关于AngularJS中的404错误的主要内容,如果未能解决你的问题,请参考以下文章

AngularJS在HTML5模式下路由404错误

AngularJS - 删除Hashbang后页面重新加载时出现404错误[重复]

AngularJS - 为啥更改 url 地址时 $routeProvider 似乎不起作用并且我收到 404 错误

Express + AngularJS + HTML:ng-include 不起作用(404 - 找不到页面错误)

如果将静态内容部署为 jar,则 Spring Boot 404 错误

使用 Laravel 路由时找不到 404 错误