将资源解释为文档，但使用MIME类型application/json传输

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

binder.js（角）将资源解释为文档，但使用MIME类型application/json传输

'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>

来源

2016-11-06 Ritik Saxena

我找到了一个解决问题的办法。我正在向角度和节点请求相同的URL。因此，响应直接从节点传递，而不将内容传递给角度，因为预期呈现的内容是一个文档，并且响应是在json中，所以我得到了这个错误。我更改了搜索数据库的网址（'/find/:url'），并且只是在url上面（'/:url'）渲染index.html，以便angular可以在节点呈现html页面时请求数据的新url，并且它工作正常。

来源

2016-11-07 03:46:32

确定..所以你的路线提供商一点儿也不工作。在您的网址控制器您使用的$ HTTP的依赖，所以..的Resource interpreted as Document but transferred with MIME type application/json意味着对象您收到的是不是一个JSON ..

<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 ..

来源

2016-11-06 15:45:24

index.js是后端文件，我不认为我应该把它包含在任何地方。 –

将资源解释为文档，但使用MIME类型application/json传输

回答

相关问题