スプリングコントローラから文字列を返してウェブページに表示することができません

Question

springmvcとangularjsを使用してデータを読み込み、ウェブページに表示しています。 URLからデータを読み取るために私はJSoup APIを使用しています。

URLから読み取ったコンテンツをWebページに表示しながらエラーが発生しました。何かアドバイスが参考になります。

コード：

HTML：

<div ng-controller="readContentController"> 
           <div> 
            {{content}} 
           </div> 
          </div> 

JSコード：

//controller 

myApp.controller('readContentController', function ($rootScope, $scope, $sce, ReportService, $window) { 
    $scope.content = {}; 
    MyService.getDataFromURL().then(
     function (response) { 
      console.log("response :" + response); 
      $scope.content = response; 
      }, 
     function (errResponse) { 
      $rootScope.showError("error :" + errResponse); 
     }); 
}); 
//service call 
myServiceFactory.getDataFromURL = function(){ 
     var deferred = $q.defer(); 

     $http.get('/getHTMLDataFromURL') 
      .then(
       function (response) { 
        deferred.resolve(response.data); 
       }, 
       function(errResponse){ 
        console.error('Error while fetching data' + errResponse); 
        deferred.reject(errResponse); 
       } 
      ); 
     return deferred.promise; 
    } 

スプリングコントローラ：

@RequestMapping(value = "/getHTMLDataFromURL", method = RequestMethod.GET) 
    public 
    @ResponseBody String getHtmlStrigContent() throws Exception { 
     Document doc = Jsoup.connect("https://xyz.abc.com/myFile.pdf").get(); 
     String htmlString = doc.toString(); 
     System.out.println("asD" + htmlString); 
     return htmlString; 
} 

エラーメッセージ：

SyntaxError: Unexpected token < in JSON at position 0 
    at JSON.parse (<anonymous>) 
    at Ec (angular.min.js:16) 
    at ic (angular.min.js:93) 
    at angular.min.js:93 
    at q (angular.min.js:7) 
    at od (angular.min.js:93) 
    at f (angular.min.js:95) 
    at angular.min.js:132 
    at m.$eval (angular.min.js:146) 
    at m.$digest (angular.min.js:143) 
(anonymous) @ angular.min.js:119 
myService.js:158 Error while fetching dataSyntaxError: Unexpected token < in JSON at position 0 

他のWebページからコンテンツを読み込み、アプリケーションWebページに表示しようとしています。

Answer 1

Angularのように、レスポンスはHTMLではなくJSONである必要があります。 @RequestMappingアノテーションにproduces="text/plain"またはproduces="text/html"を追加してみてください。

しかし、別の問題もあります。既定では、明らかなセキュリティ上の問題により、Angularは変数の内容をHTMLとして表示しません。この方法で使用する前に、コンテンツを信頼することをAngularに明示的に伝える必要があります。これを行う方法の例についてはSee the documentation for $sceを参照してください。

Answer 2

これはjsがJSON形式のHTML応答を解析しようとしているようです。 AngularJS $ HTTP Documentation

から

すべての要求に対するデフォルトのヘッダ、

$httpProvider.defaults.headers.common (headers that are common for all requests): 
Accept: application/json, text/plain, */* 

デフォルトの変換は、あなたがのContent-Typeを持つデフォルトを上書きすることができます

If the data property of the request configuration object contains an object, serialize it into JSON format. 

ですあなたの要求にヘッダーが設定されています。

var req = { 
method: 'GET', 
url: '/getHTMLDataFromURL', 
headers: { 
    'Content-Type': 'text/plain', 
    'Accept': 'text/plain' 
} 
} 

$http(req).then(function(){...}, function(){...});