sencha touch 2 中的 youtube api v3 CORS 支持答案

【问题标题】：youtube api v3 CORS support in sencha touch 2sencha touch 2 中的 youtube api v3 CORS 支持
【发布时间】：2014-11-04 03:23:33
【问题描述】：

使用 Sencha Touch，我们如何查询 youtube v3 search api？以下是直接从浏览器发出时可以正常工作的示例 url（注意：需要密钥）： "https://www.googleapis.com/youtube/v3/search?part=snippet&order=date&type=video&channelId=UC3djj8jS0370cu_ghKs_Ong&key=MY_KEY"

但是，使用 sencha touch Store ajax 代理加载相同的 url 时会失败。似乎针对此 URL 进行了 OPTIONS 调用，并且 GET 已中止。

使用 youtube V3 google api 在 Sencha touch store 中需要什么？我没有找到对 youtube V3 api 的 jsonp 支持。

【问题讨论】：

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

【解决方案1】：

我是这样使用这个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'
        }]

希望这能解决您的问题。

【讨论】：

谢谢。 useDefaultXhrHeader: false 在我的情况下丢失了。

【解决方案2】：

它对我很有效。

商店：-

    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 配置。

【讨论】：