可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I am a newbie to AngularJS. I am using a rails application to expose data in json format. The data is to be used by angular app. The angular repo and the rails repo are completely different. The reason for different repositories is because I want my rails repo just to expose data using APIs which i can use in the angular app.

My rails controller is 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, when i visit 'localhost:3000/api/v1/phones', it returns me the json data for all the phones. When I visit 'localhost:3000/api/v1/phones/1', it returns the the json data for the phone with id 1. I validated the json data format using http://jsonlint.com/. Everything works fine till here.

My angularjs route file is as:

$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 repo has the list.html template embedded in it.

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

the code for the services.js is as:

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 displayed as well when I visit '#/phones'. The problem is that 1) In chrome, following error is displayed when i inspect the page.

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

SyntaxError: missing ; before statement

Thanks for the help.

回答1:

Hey so I believe your problem is that your rails controller is returning JSON and NOT JSONP. Your controller has to explicitly specify a callback function, which can be specified by the request params.

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

So your rails code would look like (argh my rails is very 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 out: parsing JSONP $http.jsonp() response in angular.js

And I think your angular would then look like:

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; }]);

文章来源: Refused to execute script from '*' because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled

标签

Rails

callback

Refused to execute script from &#039;*&#039; because its MIME type (&#039;application/json&#039;) is not executable, and strict MIME type checking is enabled

问题:

回答1:

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