Skip to content
This repository has been archived by the owner on May 3, 2021. It is now read-only.

Commit

Permalink
No proxy needed changes
Browse files Browse the repository at this point in the history
jsanahuja committed May 29, 2019

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent f761b0e commit fd8d98a
Showing 4 changed files with 20 additions and 27 deletions.
7 changes: 5 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -3,6 +3,9 @@ Instagram Feed without using the instagram API

[Full documentation and examples here](https://www.sowecms.com/demos/jquery.instagramFeed/index.html "documentation")

## Instagram CORS issue is fixed with the last commit.
## [May 29, 2019] Working again WITHOUT proxy
Looks like Instagram reverted their CORS Policy change so now we can again GET the data directly. For this we made some changes but left the possibility of using a proxy. You'll find more in the CORS section of the documentation.

The way we do this is using the [live implementation](https://cors-anywhere.herokuapp.com/) of the [cors-anywhere project](https://github.com/Rob--W/cors-anywhere), a nodejs proxy to bypass cors. You can use other proxies or your own implementation using the 'cors_proxy' param. You will find more info in the documentation.
## [Feb 15, 2019] Instagram changed their CORS policy.
Instagram disallowed other domains so our Library stopped working. The reason it stopped working is HTTP Requests were made client-side (JS) and browsers, according to their new CORS policy, block them.
The way we solved this is using the [live implementation](https://cors-anywhere.herokuapp.com/) of the [cors-anywhere project](https://github.com/Rob--W/cors-anywhere), a nodejs proxy to bypass cors. You can use other proxies or your own implementation using the 'cors_proxy' param. You will find more info in the documentation.
10 changes: 5 additions & 5 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!--
* jquery.instagramFeed
*
* @version 1.1
* @version 1.2
*
* @author Javier Sanahuja Liebana <[email protected]>
*
@@ -286,10 +286,10 @@ <h4>Code:</h4>
<div>
<div class="section_title">
<h3>CORS</h3>
<h4>Instagram recently changed their CORS policy</h4>
<h4>Instagram CORS policy could change again</h4>
</div>
<div class="instagram_feed info">
<p>This CORS change broke the entire functionality of this library. Fortunately we have been able to get it back to work using a proxy (a <a href="https://cors-anywhere.herokuapp.com/" target="_blank">live implementation</a> of the <a href="https://github.com/Rob--W/cors-anywhere" target="_blank">cors-anywhere project</a>). With that comes the possible need of <strong>setting up your own proxy</strong> for performance reasons. I am not going to explain how can you do that, there is a bunch of information in <a href="https://github.com/Rob--W/cors-anywhere/blob/master/README.md" target="blank">the project readme</a>. You can also use other implementations of this as long as you use them server side. Navigators will block any try of bypassing this in the frontend.</p>
<p>Preventing a future Instagram's CORS policy changes we have left the functionality of using a proxy. The following example is how would we use an <a href="https://cors-anywhere.herokuapp.com/" target="_blank">implementation</a> of the <a href="https://github.com/Rob--W/cors-anywhere" target="_blank">cors-anywhere project</a>. With that would come the need of <strong>setting up your own proxy</strong> for performance reasons. I am not going to explain how can you do that, there is a bunch of information in <a href="https://github.com/Rob--W/cors-anywhere/blob/master/README.md" target="blank">the project readme</a>. You can also use other implementations of this as long as you use them server side. Browsers will block any try of bypassing this in the frontend, they care about CORS.</p>
</div>
<div class="section_code">
<h4>Code:</h4>
@@ -299,7 +299,8 @@ <h4>Code:</h4>
(function($){
$(window).on('load', function(){
$.instagramFeed({
<strong>'cors_proxy': "https://cors-anywhere.herokuapp.com/https://www.instagram.com/",</strong>
'host': "https://www.instagram.com/", <strong>// Default</strong>
//'host': "https://cors-anywhere.herokuapp.com/https://www.instagram.com/", <strong>// Cors Workaround</strong>
...
});
});
@@ -324,7 +325,6 @@ <h4 class="big"><a href="https://github.com/jsanahuja/jquery.instagramFeed">Send
(function($){
$(window).on('load', function(){
$.instagramFeed({
'cors_proxy': "https://cors-anywhere.herokuapp.com/https://www.instagram.com/",
'username': 'instagram',
'container': "#instagram-feed1",
'display_profile': true,
22 changes: 8 additions & 14 deletions jquery.instagramFeed.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/*!
* jquery.instagramFeed
*
* @version 1.1
* @version 1.2
*
* @author Javier Sanahuja Liebana <[email protected]>
*
@@ -10,7 +10,7 @@
*/
(function($){
var defaults = {
'cors_proxy': "https://cors-anywhere.herokuapp.com/https://www.instagram.com/",
'host': "https://www.instagram.com/",
'username': '',
'container': '',
'display_profile': true,
@@ -25,26 +25,20 @@
};
$.instagramFeed = function(options){
options = $.fn.extend({}, defaults, options);
if(options.username == "" && options.tag == ""){
console.log("Instagram Feed: Error, no username or tag found.");
if(options.username == ""){
console.error("Instagram Feed: Error, no username found.");
return;
}
if(!options.get_raw_json && options.container == ""){
console.log("Instagram Feed: Error, no container found.");
console.error("Instagram Feed: Error, no container found.");
return;
}
if(options.get_raw_json && options.callback == null){
console.log("Instagram Feed: Error, no callback defined to get the raw json");
console.error("Instagram Feed: Error, no callback defined to get the raw json");
return;
}

var url = options.cors_proxy + options.username;

$.ajax({
url: url,
type: "GET",
beforeSend: function(xhr){xhr.setRequestHeader("x-requested-with", 'instagram.com');},
success: function(data){
$.get(options.host + options.username, function(data){
data = data.split("window._sharedData = ");
data = data[1].split("<\/script>");
data = data[0];
@@ -118,7 +112,7 @@
}
$(options.container).html(html);
}
});
);
};

})(jQuery);
8 changes: 2 additions & 6 deletions jquery.instagramFeed.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit fd8d98a

Please sign in to comment.