將資源解釋爲文檔，但使用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傳輸

回答

相關問題