Geek Answers Handbook

Refused to execute the script from '*' because its MIME type ('application / json') is not executable and strict MIME type checking is enabled

I am new to AngularJS. I am using rails application to display data in json format. Data should be used by angular application. Repo angular repo and repo repo are completely different. The reason for different repositories is that I want my rails to simply display data using an API that I can use in an angular application.

My rail controller as below

class Api::V1::PhonesController < ApplicationController def index render json: Phone.all end def show render json: Phone.find(params[:id]) end ... end

Now that I am "localhost: 3000 / api / v1 / phones", it returns me the json data for all phones. When I visit "localhost: 3000 / api / v1 / phones / 1", it returns json data for the phone with id 1. I confirmed the json data format using http://jsonlint.com/ . Everything is working fine so far.

My angularjs route file looks like this:

 $routeProvider. when('/phones', { templateUrl: 'list.html', controller: 'PhoneListController' }). when('/phones/:id', { templateUrl: 'show.html', controller: 'PhoneShowController' }). otherwise({ redirectTo: '/phones' }); }]);

My index.html in the angular repository has a list.html template built into it.

 <html ng-app='phoneCatApp'> ... </html> <script type="text/ng-template" id="list.html"> This is the list template. </script>

The code for services.js looks like this:

 var appServices = angular.module('appServices', []); phoneCatApp.factory('appServices', ['$http', '$q', function($http, $q){ var url = "http://localhost:3000/api/v1/"; //get all phones this.getPhones = function(){ var defered = $q.defer(); var listApi = url + "phones"; $http.jsonp(listApi).then(function(results){ defered.resolve(results); }, function(error){ defered.reject(error); }); return defered.promise; } return this; }]);

The text in the script template is also displayed when I am "# / phones". The problem is that 1) In chrome, when checking a page, the following error is displayed.

 Refused to execute script from 'http://localhost:3000/api/v1/phones' because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled.

2) in firefox, the following error is displayed.

 SyntaxError: missing ; before statement

Thanks for the help.

+7
angularjs jsonp
source share
1 answer

Hey, so I believe your problem is that your rails controller returns JSON and NOT JSONP. The controller must explicitly specify a callback function that can be specified by request parameters.

See jsonp handling in rails 3 controller for an example of returning JSONP from a rail controller

So your rails code will look (argh my rails are very rusty ...):

 class Api::V1::PhonesController < ApplicationController def index if params[:callback] format.js { render :json => {:phones => Phone.all.to_json}, :callback => params[:callback] } else format.json { render json: {:phones => Phone.all.to_json}} end end

Then for the angular side this answer should help you: parsing JSONP $ http.jsonp () in angular.js

And I think your angular will look like this:

 var appServices = angular.module('appServices', []); phoneCatApp.factory('appServices', ['$http', '$q', function($http, $q){ var url = "http://localhost:3000/api/v1/"; //get all phones this.getPhones = function(){ var defered = $q.defer(); var listApi = url + "phones?callback=JSON_CALLBACK"; $http.jsonp(listApi).then(function(results){ defered.resolve(results); }, function(error){ defered.reject(error); }); return defered.promise; } return this; }]);
+6
source share

More articles:


All Articles