Obtain vine thumbnails using Angular

In an attempt to retrieve a vine thumbnail as outlined in their documentation, I wrote the following code:

<!-- 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 ) );
};

However, when testing this code, I encountered the following error in the console:

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.

Interestingly, the direct link 

https://vine.co/oembed.json?url=https%3A%2F%2Fvine.co%2Fv%2FeV1mMuab7Mp
works when entered into the browser's address bar, returning this 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
}

It seems like a CORS issue. Since I have no control over Vine's settings, how can I work around this and successfully call their service?

javascriptangularjsvine

Answer №1

Access-Control-Allow-Origin is a crucial setting on the server's response, not on the client's request. It allows clients from different origins to access the response.

In this scenario, your origin is not permitted by to access the response, hence you are unable to read it.

To learn more about CORS, visit: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

A handy solution is available through the Chrome Webstore in the form of an extension that automatically adds the 'Access-Control-Allow-Origin' header for asynchronous calls trying to reach a different host than yours.

The name of this useful extension is "Allow-Control-Allow-Origin: *" and you can find it here: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

An Array of objects is considered NULL if it does not contain any values before being iterated through

Working with Files in TypeScript (Angular 8) has led me to Encode the files in Base64 using the code below: private async convertToBase64(evidences: Array<EvidenceToDisplay>): Promise<Array<EvidenceToDownload>> { const results: Arr ...

javascriptangulartypescript

Feeling trapped by the endless stream of AJAX calls

As I was working on building a scheduler with jQuery and AJAX, I encountered a problem with multiple AJAX requests. Although most of the time everything works fine and returns the correct values, occasionally, out of more than 50 requests, I come across so ...

javascriptphpjqueryajax

Importing files dynamically in JavaScript

Currently, I have a requirement to dynamically import a markup file, extract a portion of the file, assign it to a variable, and then display the result in my React application: import('../changelog.md').then(...) I have attempted to achieve th ...

javascriptreactjs

Reimagining scrolling through content with a stylish unordered list (a sleek alternative to a select box

After having our company website redesigned by a professional designer, our site now looks much more visually appealing. However, I have encountered difficulties when trying to implement their design using HTML and CSS. One particular challenge is the heav ...

javascripthtmlcssselectdrop-down-menu

The functionality of AngularJS UI.router multiple views on a single page is not functioning properly

.state("home",{ url:'/home', templateUrl:'./resources/js/baseapp/ContactHome/views/ContactHome.html' }) .state("home.contacts",{ url:'/home', views:{ "contactByName":{ templateUrl : ' ...

angularjsangular-ui-router

Create a spinner control on an HTML webpage with the help of JavaScript

I am attempting to create a spinner control on my webpage, and I have tried the following code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o ...

javascriptspinner

Hide panel when button is clicked - bootstrap

Is it possible to make a panel collapse by clicking a regular bootstrap button? Below is the code snippet: <div class="panel panel-primary" style="border-color: #464646;"> <div class="panel-heading" style="border-color: #BBBBBB; height: 35px; ...

javascripthtmltwitter-bootstrapangular

"Set a timeout for an HTML markup to be displayed in an AJAX

Is there a way to automatically hide the success message that appears after an AJAX request is successful? For example, after 2 seconds of displaying the message, I want it to disappear. Here's the code I have: $.ajax({ url : 'process/regis ...

javascriptajax

Align Headers to the Top Center in React Material-UI Datagrid

Is there a way to align the wrapped headers at the top-center using sx? I've tried the following code: const datagridSx = { '& .MuiDataGrid-columnHeaders': { height: 'unset !important', maxHeight: '168p ...

javascriptreactjsmaterial-uidatagrid

Ways to prevent a $digest loop believed to be triggered by a filter

Check out this Plunker: http://plnkr.co/edit/10Rs92cRulf9VtI3Bav6 Everything seems to be functioning properly, however, upon examining the console logs, it's evident that an issue exists. Despite the simplicity of the table, Angular has already reac ...

angularjs

Is there a way to intercept all AJAX requests in JavaScript?

Could there be a universal event handler for ajax requests that is automatically triggered upon the completion of any ajax request? This is something I am exploring while developing a greasemonkey script for an ajax-heavy website. In past scripts, I have ...

javascriptajaxgreasemonkey

Utilizing jQuery show() and hide() methods for form validation

I created a form to collect user details and attempted to validate it using the jQuery hide and show method. However, I seem to be making a mistake as the required functionality is not working correctly. What am I missing? I have searched for solutions on ...

javascriptjquery

Is there a way to ensure that the 'pointermove' event continues to trigger even after the dialog element has been closed?

I am working on a project that involves allowing users to drag elements from a modal dialog and drop them onto the page. I have implemented a feature where dialog.close() is called once the user starts dragging. This functionality works perfectly on deskto ...

javascripthtmlcss

Three.js ensures that the mesh texture does not stretch, instead it covers its container perfectly

I have a container where I apply an image using three.js and mesh. Here's how I add my mesh to the scene: this.$els = { el: el, image: el.querySelector('.ch__image') <-- size of container image is applied to }; this.loader = ne ...

javascriptcssthree.js

The Kendo grid row mysteriously vanished while trying to edit it immediately after inserting a new row

I have configured a Kendo grid in the following manner, but I am encountering an issue where after adding a row, it disappears when I attempt to edit it before sending the changes to the server. However, upon refreshing the page, the row reappears. Any i ...

javascriptkendo-uikendo-grid

Show a Toast in React without relying on useEffect to manage the state

I have successfully implemented the Toast functionality from react-bootstrap into my application using the provided code. However, I am unsure if it is necessary to utilize useEffect to set show with setShow(items.length > 0);. Would it be simpler to ...

javascriptreactjstypescriptreact-hooks

Issue with THREE.SpriteCanvasMaterial functionality

This unique piece of code (inspired by this and this example): generateCircle = (ctx) -> position = 0.5 radius = 0.5 ctx.scale(0.05, -0.05) ctx.beginPath() ctx.arc(position, position, radius, 0, 2*Math.PI, fa ...

javascriptthree.jshtml5-canvastextures

How can I allow scrolling within a specific div element?

Here is the structure of my layout: <html> <head> stuff goes here </head> <body> <div id="master"> <div id="toolbar"> <input type="text" id="foo"> </div> <div id="c ...

javascriptjquerycssjquery-uihtml

Having trouble with the $.each function?

Values from the database row units for values salam & salavat are as follows: [these values were inserted using json_encode()] salam: [{"name_units":"salam","price_units":"74,554","checkbox_units":["minibar","mobleman"]},{"name_units":"mokhles","pr ...

javascriptjqueryarraysjsoneach

Can the useEffect hook prevent the page from rendering?

Is there a way to have a slight delay every time the user visits or reloads the page in order to allow for content loading? Currently, I am using a useEffect() with a setTimeout() function that sets the variable isLoading to false after 1 second. However, ...

javascriptreactjssettimeoutuse-effect