Resource interpreted as Document but transferred with MIME type application/json
Question
I'm writing a code based on node and angular. The code takes the url as an input, checks if the url exists in the database, and if it doesn't, creates it. The request is made from the angular code. The angular is able to open the homepage when localhost is run without a trailing url, but when the url is given, the request doesn't reach angular controller, and the browser responds with the error Resource interpreted as Document but transferred with MIME type application/json .
I've already checked out the existing solutions on SO but none worked. Please help.
binder.js(angular)
'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(homepage)
<!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>
2 answers
solution1
1 ACCPTED 2016-11-07 03:46:32
I found a solution to the problem. I was making request to the same url from both angular and node. So the response was getting delivered from the node directly, without passing the content to angular, and since, the content expected to be rendered was a document, and the response was in json, I was getting this error. I changed the url for searching database( '/find/:url' ), and simply made above url( '/:url' ) render index.html , so that angular could request the new url for data while node renders the html page, and it worked.
solution2
0 2016-11-06 15:45:24
ok.. so your route provider does'nt working.. in your url controller you use a $http dependency, so.. the Resource interpreted as Document but transferred with MIME type application/json means that the object are you receiving is not a 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>
i think you are not include the index.js..
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.