Я пытаюсь получить миниатюру виноградной лозы после их документа со следующим кодом:
<!-- 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 bar. Я получаю этот 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. Но поскольку я не контролирую виноградную лозу, как я могу назвать эту услугу?
Access-Control-Allow-Origin устанавливается на ответе от сервера, а не на запросе клиента, чтобы клиенты из разных источников имели доступ к ответу.
В вашем случае http://www.vine.co/ не позволяет вашему источнику иметь доступ к ответу. Поэтому вы не можете его прочитать.
Для получения дополнительной информации о CORS: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
Но в веб-магазине Chrome есть расширение, которое добавляет заголовок "Access-Control-Allow-Origin" для вас, когда на странице есть асинхронный вызов, который пытается получить доступ к другому хосту, чем ваш.
Имя расширения: "Allow-Control-Allow-Origin: *", и это ссылка: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi