0

次のコードを使用して、ドキュメントに従ってつるのサムネイルを取得しようとしました。

<!-- language: lang-js -->
var onGetVineThumbnailSuccess = function( videoUrl ) {
    return function( response ) {
    var args = { videoUrl: videoUrl };
    args.thumbnailUrl = response['thumbnail_url']; // jshint ignore:line

    $rootScope.$broadcast( 'event:onGetVineThumbnailSuccess', args);
  };
};

var getVineThumbnail = function ( videoUrl ) {
  $http
    .get( 'https://vine.co/oembed.json?url=' + encodeURIComponent( videoUrl ) )
    .then( onGetVineThumbnailSuccess( videoUrl ) );
};

しかし、コンソールには次のエラーがあります。

XMLHttpRequest cannot load https://vine.co/oembed.json?url=https%3A%2F%2Fvine.co%2Fv%2FeV1mMuab7Mp. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access.

ところで、このリンク：https://vine.co/oembed.json?url=https%3A%2F%2Fvine.co%2Fv%2FeV1mMuab7Mp動作します。ブラウザのURLバーに直接入れた場合。私はこれを取得しますJSON：

{
  "version": 1.0,
  "type": "video",
  "cache_age": 3153600000,
  "provider_name": "Vine",
  "provider_url": "https://vine.co/",
  "author_name": "Evengelia",
  "author_url": "https://vine.co/u/1204040590484971520",

  "title": "Everything was beautiful on this day. #6secondsofcalm",

  "thumbnail_url": "https://v.cdn.vine.co/r/videos/59734161E81269170683200901120_45a46e319ea.1.1.8399287741149600271.mp4.jpg?versionId=tc3t.oqGtjpJNlOX1AeM1CAnWONhbRbQ",
  "thumbnail_width": 480,
  "thumbnail_height": 480,
  "html": "<iframe class=\"vine-embed\" src=\"https://vine.co/v/eV1mMuab7Mp/embed/simple\" width=\"600\" height=\"600\" frameborder=\"0\"><\/iframe><script async src=\"//platform.vine.co/static/scripts/embed.js\"><\/script>",
  "width": 600,
  "height": 600
}

CORSの問題として聞こえます。しかし、私はVineを制御できないので、このサービスをどのように呼び出す必要がありますか?

4

1 に答える 1

0

Access-Control-Allow-Originは、異なるオリジンからのクライアントが応答にアクセスできるようにするためのクライアント要求ではなく、serverからの応答に設定されます。

あなたの場合、http://www.vine.co/はオリジンが応答にアクセスすることを許可していません。したがって、それを読み取ることはできません。

CORS の詳細については、https ://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS を参照してください。

ただし、Chrome Webstore には、ページ内で別のホストにアクセスしようとする非同期呼び出しがある場合に、'Access-Control-Allow-Origin' ヘッダーを追加する拡張機能があります。

拡張機能の名前は「Allow-Control-Allow-Origin: *」で、リンクは次のとおりです: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

于 2015-10-30T12:16:37.907 に答える