2017-02-28 3 views
1

こんにちは私はAngular jを初めて使っています。 JSON形式でデータを返すように設計されたWebサービスを消費しようとしています。ローカルホスト(WAMP)のローカルjsファイルから呼び出しています。 Webserviceは.netプラットフォームで設計されています。 私はjsonpをクロスドメインWebサービスに使用しています。AngularJSでjsonpを使用してクロスドメインWebサービスを使用しようとすると「Uncaught SyntaxError:予期しないトークンが発生しました」

マイAngularJsコードは、このようなものです:

var app = angular 
       .module("myModule",[]) 
       .controller("myController",function($scope,$http,$sce,$log){ 
        var url = "http://somevalid_api_url"; 
        url=$sce.trustAsResourceUrl(url); 
        $http.jsonp(url, {jsonpCallbackParam: 'callback'}) 
        .then(function(data){ 
         console.log(data); 
        }); 

       }); 

APIのレスポンスは、このようなものです:ブラウザのコンソールで

{ 
    "deviceId":null, 
    "id":1, 
    "isNewUser":"\u0000", 
    "message":"Sucess", 
    "playlistId":0, 
    "userId":0, 
    "privacyPolicy":"<p style=\"box-sizing: border-box; margin: 0px 0px 12.5px; color: rgb(0, 0, 0); font-family: wf_segoe-ui_normal, Tahoma, Verdana, Arial, sans-serif; font-size: 16px;\">\u000d\u000a\u0009Your privacy is important to us. This privacy statement explains what personal data we collect from you and how we use it. We encourage you to read the summaries below and to click on &quot;Learn More&quot; if you&#39;d like more information on a particular topic.<\/p>\u000d\u000a<p style=\"box-sizing: border-box; margin: 0px 0px 12.5px; color: rgb(0, 0, 0); font-family: wf_segoe-ui_normal, Tahoma, Verdana, Arial, sans-serif; font-size: 16px;\">\u000d\u000a\u0009The product-specific details sections provide additional information relevant to particular Microsoft products. This statement applies to the Microsoft products listed below, as well as other Microsoft products that display this statement. References to Microsoft products in this statement include Microsoft services, websites, apps, software and devices.<\/p>\u000d\u000a", 
    "termAndCondition":"<p>\u000d\u000a\u0009<span style=\"color: rgb(51, 51, 51); font-family: Georgia, &quot;Times New Roman&quot;, serif; font-size: 18px;\">Terms and Conditions are a set of rules and guidelines that a user must agree to in order to use your website or mobile app. It acts as a legal contract between you (the company) who has the website or mobile app and the user who access your website and mobile app.<\/span><\/p>\u000d\u000a", 
    "termsId":1 
} 

なって、次のエラー:

Uncaught SyntaxError: Unexpected token : 

私はエラーをクリックすると、私は、次の取得の詳細:(:) Image of details in console

それはコロンからいくつかの問題を抱えていることを意味、「デバイスID」の直後です。

私は以下のリンクから解決策を試してみましたが、私のために働いていなかった

parsing JSONP $http.jsonp() response in angular.js

AngularJS cross-domain requests using $http service

Cross-domain $http request AngularJS

AngularJS Uncaught SyntaxError: Unexpected token :

が2でみましたその逆Angualr Jsのv1.6.2およびv1.5.1の両方で失敗しました。誰が助けるか、このを通して私を導くことができる場合、私は本当に感謝するでしょう Angularjs JSONP not working

Iのくぼみは、ソリューションを次の中から何かを理解していました。

+0

エラーは、応答形式がJSONPではなくJSONであり、互換性がないためです。クロスドメインリクエストを行う際に、「アクセスコントロールヘッダーなし」のエラーを回避するためにこれを行ったと思いますか? –

+0

@Rory McCrossanはい。 WebサービスはJSONを返します。私の呼び出し元のスクリプトが私のローカルマシン上にあり、ウェブサービスが私のローカルマシン上にないサーバ上にあるので、私はそれを打つことができませんでした。したがって、私は多くの記事を読んで、jsonpをこのクロスドメインシナリオです。だから、より良い提案? –

+0

サーバーにアクセスできる場合は、ドメイン間の要求が許可されるように、CORSヘッダーを含めるように応答を変更する必要があります。サーバーにアクセスできない場合は、JSコードからこのAPIへのリクエストを行うことができません。PHPやC#などのサーバー側言語で行う必要があります。 –

答えて

1

それはJSONP形式ではありませんので、JSONP応答は次のようになります:

mycallback({ user: 'wang' }); 

通常のJSONを好きではない:

{ user: 'wang' } 

あなたはJSONPを行うには、サーバー側が必要になります、フロントエンドコーディングだけでなく、

関連する問題