youtube api v3在sencha touch 2中支持CORS

时间:2014-11-04 03:23:33

标签: youtube-api sencha-touch sencha-touch-2 youtube-javascript-api

使用Sencha Touch,我们如何查询youtube v3搜索API? 以下是直接从浏览器发出的示例网址(注意:需要密钥): “https://www.googleapis.com/youtube/v3/search?part=snippet&order=date&type=video&channelId=UC3djj8jS0370cu_ghKs_Ong&key=MY_KEY

然而,当使用sencha touch Store ajax proxy加载时,相同的url会失败。 似乎OPTIONS对此网址进行了调用,GET已中止。

在使用youtube V3 google apis的Sencha touch商店需要什么?我没有找到youtube V3 api的jsonp支持。

2 个答案:

答案 0 :(得分:4)

我已经使用过这样的api,

proxy: {
            type: 'ajax',
            url: 'https://www.googleapis.com/youtube/v3/search',
            useDefaultXhrHeader: false,
            extraParams: {
                part: 'snippet',
                q: 'ambarsariya',
                regionCode: 'IN',
                maxResults: 30,
                key: 'your_key'
            },
            reader: {
                type: 'json',
                rootProperty: 'items'
            }
        }

你需要做的另一件事就是你在这个商店的模型中设置了一个idProperty。我使用过的模型的内部配置

idProperty: 'videoId',// its better if this name is not same as any fields name
        fields: [{
            name: 'snippet'
        }, {
            name: 'thumbnail',
            mapping: 'snippet.thumbnails.default.url'
        }, {
            name: 'title',
            mapping: 'snippet.title'
        }]

希望这能解决你的问题。

答案 1 :(得分:2)

它适用于我。

STORE: -

    Ext.define('MyApp.store.videos', {
        extend: 'Ext.data.Store',
        model: 'MyApp.model.Video',
        config: {
            autoLoad: true,
            proxy: {
                type: 'ajax',

                //This is required to enable cross-domain request
                useDefaultXhrHeader: false,
                url: 'https://www.googleapis.com/youtube/v3/search',

                extraParams: {
                    part: 'snippet',
                    q: "Enrique",  //Query string
                    regionCode: 'IN',
                    maxResults: 30,
                    key: 'AIzaSyD6FvoLaIFqyQGoEY4oV7TEWGAJSlDd1-8'
                }
            }
        }
    });

This is the model used by the above store.

MyApp.model.Video:-

Ext.define('MyApp.model.Video', {
    extend: 'Ext.data.Model',
    requires: [],

    config: {
        idProperty: 'videoId',
        fields: [{
            name: 'id'
        }, {
            name: 'videoId',
            mapping: 'id.videoId'
        }]
    }
});

它也适用于jsonp代理,

只需更改类型:jsonp在代理内部并删除useDefaultXhrHeader config。