ios - How can I query the iTunes search API in javascript? - Stack Overflow

admin管理员组

文章数量:1327801

I am trying to query the App Store for information on a given app, however I keep getting the following error.

XMLHttpRequest cannot load =<some-app-id>. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://www.<some-website>.co.uk' is therefore not allowed access. The response had HTTP status code 501.

The code I'm using to execute the request is as follows.

Does anyone know where I may be going wrong?

var config = {
        headers:  {
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Methods': 'GET',
            'Access-Control-Allow-Headers': 'Content-Type, X-Requested-With',
        }
    };

    $http.get("=<some-app-id>", config).success(
        function(data) {
            // I got some data back!
        }
    );

I am trying to query the App Store for information on a given app, however I keep getting the following error.

XMLHttpRequest cannot load https://itunes.apple./lookup?id=<some-app-id>. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://www.<some-website>.co.uk' is therefore not allowed access. The response had HTTP status code 501.

The code I'm using to execute the request is as follows.

Does anyone know where I may be going wrong?

var config = {
        headers:  {
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Methods': 'GET',
            'Access-Control-Allow-Headers': 'Content-Type, X-Requested-With',
        }
    };

    $http.get("https://itunes.apple./lookup?id=<some-app-id>", config).success(
        function(data) {
            // I got some data back!
        }
    );

• javascript
• ios
• angularjs
• http-get

Share Improve this question Follow asked Apr 4, 2015 at 23:00 user843337user843337 1

• 1 Daniel's solution with $http.jsonp is better – OMGPOP Commented Jul 7, 2015 at 12:31

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

You can use $http.jsonp,

$http.jsonp("https://itunes.apple./lookup", {
    params: {
      'callback': 'functionName',
      'id': 'some-app-id'
    }
});

Where functionName is the name of your globally defined function in string form. You can redefine it in your module so that it has access to $scope.

Documentation

Edit: here's a plunker showing my successful approach roughly getting it into an AngularJS app:

http://plnkr.co/edit/QhRjw8dzK6Ob4mCu6T6Z?p=preview

Adding those headers to your server won't change what is happening. The cross origin headers need to be added by the iTunes API.

That is not going to happen, so what you need to do instead is to use JSONP style callbacks in your webpage. There is an example on the iTunes search API page.

http://www.apple./itunes/affiliates/resources/documentation/itunes-store-web-service-search-api.html

Note: When creating search fields and scripts for your website, you should use dynamic script tags for your xmlhttp script call requests. For example:

<script src="https://.../search?parameterkeyvalue&callback="{name of JavaScript function in webpage}"/>

Note the 'callback' parameter there. That is a function defined globally in your javascript on the page that will get called with the response from the request to the url in 'src'. That function puts the data into your page, or application. You'll have to figure out how.

It's a shame that the language used in this documentation is not clearer, because you must do some kind of JSONP style workaround since they don't have CORS enabled on their API.

If you need to dynamically add a script tag (fetching data once is not enough) you can try this tutorial:

Dynamically add script tag with src that may include document.write

The API in general is probably intended for use by backends (not affected by cross origin issues), not for client side fetching.

Using angular 2:

constructor(private _jsonp: Jsonp) {}

public getData(term: string): Observable<any> {

  return this._jsonp.request(itunesSearchUrl)
       .map(res => {
             console.log(res);
          });
}

You can try with the following:

const appId = '<some-app-id>';
const url = `https://itunes.apple./lookup?id=${appId}&callback=json_callback`;
$http.jsonp(url).success((data) => {
  // handle data here
}).error((error) => {
  // handle the error here
  console.log(error);
});

$http.jsonp() method makes a JSONP request to the iTunes API with the specified id parameter and a callback parameter with a value of json_callback. The server then wraps the response data in a function call with the callback function name.

JSONP has security limitations and is not 100% remended, but this could fix your issue.

本文标签： iosHow can I query the iTunes search API in javascriptStack Overflow