如何在 javascript 中查询 iTunes 搜索 API?
How can I query the iTunes search API in javascript?
我正在尝试在 App Store 中查询有关给定应用程序的信息,但是我不断收到以下错误。
XMLHttpRequest cannot load https://itunes.apple.com/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.
我用来执行请求的代码如下。
有谁知道我可能哪里出错了?
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.com/lookup?id=<some-app-id>", config).success(
function(data) {
// I got some data back!
}
);
编辑:这里有一个 plunker 展示了我的成功方法,粗略地将其放入 AngularJS 应用程序:
http://plnkr.co/edit/QhRjw8dzK6Ob4mCu6T6Z?p=preview
将那些 headers 添加到您的服务器不会改变正在发生的事情。交叉源headers需要iTunes添加API。
这不会发生,因此您需要做的是在您的网页中使用 JSONP 样式回调。 iTunes 搜索 API 页面上有一个示例。
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}"/>
注意那里的 'callback' 参数。这是一个在页面上的 javascript 中全局定义的函数,将通过对 'src' 中 url 的请求的响应来调用。该函数将数据放入您的页面或应用程序中。你得想办法。
遗憾的是本文档中使用的语言不够清晰,因为您必须执行某种 JSONP 样式的解决方法,因为他们的 API.
上没有启用 CORS
如果你需要动态添加脚本标签(一次获取数据是不够的)你可以试试这个教程:
Dynamically add script tag with src that may include document.write
一般来说,API 可能是供后端使用(不受跨源问题影响),而不是用于客户端抓取。
您可以使用 $http.jsonp
,
$http.jsonp("https://itunes.apple.com/lookup", {
params: {
'callback': 'functionName',
'id': 'some-app-id'
}
});
其中 functionName
是字符串形式的全局定义函数的名称。您可以在模块中重新定义它,以便它可以访问 $scope.
使用 angular 2:
constructor(private _jsonp: Jsonp) {}
public getData(term: string): Observable<any> {
return this._jsonp.request(itunesSearchUrl)
.map(res => {
console.log(res);
});
}
我正在尝试在 App Store 中查询有关给定应用程序的信息,但是我不断收到以下错误。
XMLHttpRequest cannot load https://itunes.apple.com/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.
我用来执行请求的代码如下。
有谁知道我可能哪里出错了?
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.com/lookup?id=<some-app-id>", config).success(
function(data) {
// I got some data back!
}
);
编辑:这里有一个 plunker 展示了我的成功方法,粗略地将其放入 AngularJS 应用程序:
http://plnkr.co/edit/QhRjw8dzK6Ob4mCu6T6Z?p=preview
将那些 headers 添加到您的服务器不会改变正在发生的事情。交叉源headers需要iTunes添加API。
这不会发生,因此您需要做的是在您的网页中使用 JSONP 样式回调。 iTunes 搜索 API 页面上有一个示例。
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}"/>
注意那里的 'callback' 参数。这是一个在页面上的 javascript 中全局定义的函数,将通过对 'src' 中 url 的请求的响应来调用。该函数将数据放入您的页面或应用程序中。你得想办法。
遗憾的是本文档中使用的语言不够清晰,因为您必须执行某种 JSONP 样式的解决方法,因为他们的 API.
上没有启用 CORS如果你需要动态添加脚本标签(一次获取数据是不够的)你可以试试这个教程:
Dynamically add script tag with src that may include document.write
一般来说,API 可能是供后端使用(不受跨源问题影响),而不是用于客户端抓取。
您可以使用 $http.jsonp
,
$http.jsonp("https://itunes.apple.com/lookup", {
params: {
'callback': 'functionName',
'id': 'some-app-id'
}
});
其中 functionName
是字符串形式的全局定义函数的名称。您可以在模块中重新定义它,以便它可以访问 $scope.
使用 angular 2:
constructor(private _jsonp: Jsonp) {}
public getData(term: string): Observable<any> {
return this._jsonp.request(itunesSearchUrl)
.map(res => {
console.log(res);
});
}