未能加载资源：服务器响应状态为404（未找到）angular js + ionic。

Question

我在使用Google开发工具时遇到了这个错误，请问有人知道问题所在吗？我已经试图多次更改文件结构和app.js文件中的stateProvider（没有控制器），但似乎都不是问题所在。（脚本已包含在app.js中，文件名和目录都正确）

此外，我的注销（logout）和提交帖子（submitPost）按钮也无法正常工作。

newpost.html

<div class="modal slide-in-up" ng-controller="NavCtrl">
 <!-- Modal header bar -->
   <header class="bar bar-header bar-secondary">
      <button class="button button-clear button-primary" ng-click="close()">Cancel</button>
      <h1 class="title">New Shout</h1>
      <button class="button button-positive" ng-click="submitPost()">Done</button>
   </header>

<!-- Modal content area --> 
   <ion-content class="padding has-header">
       <form class ng-submit="submitPost()" ng-show="signedIn()"> 
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Title" ng-model="post.title">
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Link" ng-model="post.url">
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
        </form>
    </ion-content>
</div>

controller.js文件

app.controller('NavCtrl', function ($scope, $firebase, $location, Post, Auth, $ionicModal) {
    $scope.post = {url: 'http://', title: ''};

    // Create and load the Modal
    $ionicModal.fromTemplateUrl('newpost.html', function(modal) {
      $scope.taskModal = modal;
    }, {
      scope: $scope,
      animation: 'slide-in-up'
    });
    // Open our new task modal
    $scope.submitPost = function () {
      Post.create($scope.post).then(function (postId) {   
        $scope.post = {url: 'http://', title: ''};  
        $location.path('/posts/' + postId);              
        $scope.taskModal.show();  
      });
    };
    $scope.close = function() {
      $scope.taskModal.hide();
    };
    $scope.logout = function () {
        Auth.logout();
    };
});

项目清单页面，post.html

<ion-header-bar class="bar-positive" ng-controller="NavCtrl">
   <button class="button button-clear" ng-click="submitPost()">New</button>
   <h1 class="title"><b><a class="navbar-brand" href="#/posts">MyApp</a></b></h1>
   <button class="button button-clear" ng-click="logout()">Logout</button>
</ion-header-bar>

- Thinkerer

Answer 1

将 index.html 中的 <base href="/"> 更改为 <base href="./">。

- Vikram Sapate

Answer 2

404 的字面意思是文件未找到。就是这么简单。检查一下URL是否正确，是否有重定向（使用Fiddler）。也许应该将协议更改为https://而不是http://？URL中是否需要“www”？

在Chrome中点击给出的URL并查看文件是否存在。

- Erti-Chris Eelmaa

---

感谢 @Erti-Chris Eelmaa。当我点击错误时，它显示 Cannot GET /newpost.html。我发现了一个错误，$ionicModal.fromTemplateUrl('newpost.html', function(modal) 应该是 $ionicModal.fromTemplateUrl('templates/newpost.html', function(modal)但现在当我运行 grunt serve 时，它一直在加载... 我无法按 F12 进行故障排除。 - Thinkerer

那是因为你正在进行无限递归。你的newpost.html总是在创建新的NavCtrl，而NavCtrl又总是在创建新的newpost.html，这个过程会一直持续下去。 - Erti-Chris Eelmaa

@Erti-Chria Eelmaa，有什么建议可以纠正这段代码吗？我认为在HTML中放置nav.ctrl只是表示它使用该控制器。递归是如何发生的？ - Thinkerer

摆脱ng-controller =“NavCtrl”，并将其放置在“body”标签或更靠近的位置，以便您不必每次重新加载控制器。 - Erti-Chris Eelmaa

Answer 3

不确定是否有人感兴趣，但我在尝试上传到Firebase存储时遇到了类似的问题，以下是我解决它的方法。 上传失败的错误截图，显示503和在75％进度后出现400

我用于上传的代码段是

 //Event: data.Event,
       // Date: data.Date,
      // Time: data.Time
var data = getData();
data.filename=uploadfile.name;
var metadata = {
    customMetadata: {
       data
    }
}

var storageRef = firebase.storage().ref().child("features");

console.log("Filenames to upload :" + uploadfile.name);

var fileRef = storageRef.child(uploadfile.name);

var uploadTask = fileRef.put(uploadfile,metadata);

问题出在自定义元数据，一旦我将其更改为像这样，

  var metadata = {
    customMetadata: {
        Event: data.Event,
        Date: data.Date,
        Time: data.Time
    }
}

上传功能已开始运作。因此，如果在设置自定义元数据时出现错误，Firebase 将报错并可能不提供原因。

以下是成功上传自定义元数据后的截图： successful upload once the custom meta data is corrected

- Kameswaran Subbaraman