Question

我正在编写基于节点和角度的代码。代码将url作为输入，检查数据库中是否存在url，如果不存在，则创建它。该请求来自角度代码。当localhost在没有尾随URL的情况下运行时，angular能够打开主页，但是当给出url时，请求不会到达角度控制器，浏览器会以错误Resource interpreted as Document but transferred with MIME type application/json响应。
我已经检查了S.O.的现有解决方案。但都没有用。请帮忙。

的 binder.js（角）

    'use strict';
    var app = angular.module('clip',['ngRoute','ngResource'])
    app.config(function($routeProvider,$locationProvider){
       $routeProvider.
       when('/',{
         templateUrl:"main.html",
       }).
       when('/:url',{
         templateUrl:'url.html',
         controller: "url"
       })
       $locationProvider.html5Mode({enabled:true})
    });

     app.controller("url",function($scope,$http,$routeParams){
       $scope.load = function(){
          var urls = $routeParams.url;
          console.log("inside angular code");
          $http.get('/:url').success(function(result){
            if(result.exists) {
            $scope.content = result.content;
            $scope.exists=false;
            }
            else {
              $scope.exists = true;
              $scope.content="";
            }
          })
        }
      })

index.js

    var express = require('express');
    var db = require('./models.js');
    var bodyParser = require('body-parser');
    var app = express();

    app.use(express.static(__dirname+"/public"))
    app.use(bodyParser.urlencoded({extended:true}))
    app.use(bodyParser.json())

    app.set('port',(process.env.PORT||5000));

    app.get('/',function(req,res){
      res.sendFile('index.html')
    })

    app.route('/:url')
    .get(function(req,res){
      res.setHeader('Content-Type','application/json');
      db.find({url:req.params.url},function(err,data){
        if(data.length == 0){
          res.json({
            exists:false
          })
        }
        else {
          // TO-DO: delete from database
          res.json({
            exists:true,
            data:data[0].content
          })
        }
      })
    })

    app.listen(app.get('port'),function(){
      console.log("Magic happens at port "+app.get('port'));
    });

的的index.html（主页）

    <!DOCTYPE html>
    <html ng-app='clip'>
      <head>
        <base href="/" />
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>MyCLips</title>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-resource.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
        <script src="js/binder.js"></script>
      </head>
      <body>
        <div ng-view>
        </div>
      </body>
    </html>

url.html

    <div class="container-fluid" data-ng-init="load()">
      <form>
        <div class="form-group">
          <textarea class="form-control" required="required" rows="10" cols="10" placeholder="paste your data here" ng-model="content"></textarea>
          <button type="submit" class="btn btn-success" ng-click="submit()" ng-show="exists">Create</button>
        </div>
      </form>
    </div>

Answer 1

我找到了问题的解决方案。我正在从角度和节点向同一个URL发出请求。所以响应是直接从节点传递的，没有将内容传递给angular，因此，预期呈现的内容是一个文档，响应是在json中，我收到了这个错误。我更改了搜索数据库的网址（'/find/:url'），并简单地在上面的网址（'/:url'）渲染index.html，以便当节点呈现html网页时，angular可以请求新的网址数据，它有效。

Answer 2

好..所以你的路由提供商没有工作..在你的url控制器中你使用$ http依赖，所以.. Resource interpreted as Document but transferred with MIME type application/json意味着你收到的对象不是json .. < / p>

<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-resource.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
        <script src="js/binder.js"></script>

我认为你不包括index.js ..

资源解释为Document但使用MIME类型application / json

2 个答案: