Access-Control-Allow-Origin not present for localhost - javascript

I'm using the Instagram api and have successfully retrieved an access_token, along with using HTML5 geolocation to retrieve a user's location. This data is then used to construct the string to access the instagram endpoint:
https://api.instagram.com/v1/media/search" + coordsquery + "&access_token=" + access
I have set my redirect uri from Instagram as http://localhost/explorer and my request for access_token in my application is var redirect = "http://localhost/explorer";
However I still get the error. I read that Chrome has a bug or something with localhost and making calls like this so I tried in firefox. Same deal.
I also read somewhere about appending ?callback=? to the GET request url. Also no dice.

I still don't know what was wrong with my original:
$.get(querystring, function( data ) {
console.log(data);
});
but I ended up trying this:
$.ajax({
type: "GET",
dataType: "jsonp",
url: querystring,
success: function(data) {
console.log(data);
}
});
and it worked just fine.
If someone could possibly explain why the second approach worked where the first failed I'd be forever grateful.

Related

Retrieve list of Instagram pictures by Hashtag

I have 2 questions:
1) I'm trying to retrieve a list of posts from Instagram via javascript but I keep getting errors:
$(document).ready(function() {
$.ajax({
url: 'https://www.instagram.com/explore/tags/lion/?__a=1',
dataType: 'jsonp',
type: 'GET',
success: function(data){
console.log(data);
},
error: function(data){
console.log(data);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The error I get:
SyntaxError: missing ; before statement[Learn More]
If I change jsonp to json:
Cross-Origin Request Blocked
How can I overcome this problem?
2)Is it maybe not allowed to get data for my site from the url https://www.instagram.com/explore/tags/lion/?__a=1 ? (maybe they consider it like scraping?)
I have tried to check the official api page but it sounds like only users who have an instagram account and are logged in would be able to see the contents of the feed after retrieving an oauth2 token.
EDIT:
Seems like that to send a request to this url i need jsonp but since I'm not getting the answer in a proper format I'm not sure how can I make this request work. (There isn't already a question like this on stackoverflow about Instagram. The API has recently changed so I'm trying to find a workaround).
According to the Instagram Developers Documentation you should pass a valid access token on the URL using the ?access_token=ACCESS-TOKEN parameter.
https://www.instagram.com/developer/endpoints/tags/
Try removing dataType: 'jsonp' from your AJAX request to get the actual error response from Instagram

How to access HP ALM using REST and local javascript?

I just want to access ALM via local written javascript js in the browser (IE11, Firefox) via the REST API but I can not login. Here is my code for requesting the LWSSO cookie via jquery:
var auth = btoa(USER+":"+PASSWORD);
$.ajax({
type: "POST",
url: https://alm.xxx.net/qcbin/authentication-point/j_spring_security_check,
headers: {
"Authorization": "Basic " + auth
},
success : function(data) { },
});
The response header contains:
https://alm.xxx.net/qcbin/authentication-point/login.jsp;jsessionid=1gfsdk4pn525f1ur55e2x2zzte?login_error
With OTA/directX object everything works fine but I want to use the REST API via javascript. Can anyone help me?
First of all; which version of ALM are you using? Second, I think you are using the wrong URL for the authentication point. According to the documentation (for ALM 12.01) it should be https://alm.xxx.net/qcbin/authentication-point/authenticate.
Also, the HTTP method you use should be GET, not POST.
I noticed that you are using https in the URL, so I assume your instance of ALM is set up with that?

Adding a contact using Google Contact API in javascript

I am playing with Google API in javascript. I managed to get a list of my contact with the following code :
$.ajax({
url: 'https://www.google.com/m8/feeds/contacts/default/full?access_token=' + access_token + '&alt=json',
method: 'GET',
error: function(error) {
alert('An error has occured during contact creation.');
},
success: function(data, status){
console.log(data);
}
});
I tried to add a contact by changing GET to POST and adding my contact data in the request body. But as soon as I add a data attribute, or change GET to POST, the server answers me the really annoying "No 'Access-Control-Allow-Origin" error.
Any idea?
I am following this documentation : https://developers.google.com/google-apps/contacts/v3/?csw=1#creating_contacts
Thanks a lot
It is possible to do this from the browser, although not obvious at all.
Based on this SO answer, we learn that there is method called gapi.client.request that can be used for this (instead of jQuery's $.ajax).
Accordingly, for editing we can do:
gapi.client.request({
method : 'PUT',
path:'m8/feeds/contacts/default/full/<contactId>/<editRevisionFromGET>',
body : {"version":"1.0","encoding":"UTF-8","entry": ...},
callback : function(data) {
console.log(data);
}
});
The important parts for editing in here are:
send back the entire entry you got before from a read
use the current ID given at the end of the URL in the entry.link element with relation type edit (or you'll get a HTTP Status 409 - Conflict)
Side note:
Notice that these requests actually are done to https://content.googleapis.com/ ...
From some quick tests, it seems you can do ?all? requests just to that URL instead of google.com, and then CORS issues disappear.

Getting 'data is null' on a Twitter API call but displays data in browser

I'm trying to display the follow count of a twitter account, but when I hook into the API using this code:
$.getJSON("https://api.twitter.com/1/users/show.json?screen_name=uswitchTech&include_entities=true", function(data) {
console.log(data);
if (!data.error) {
$("#followers").html(data.followers_count);
}
});
I get a 200 ok report but with Data is null message.
But if I download the json file to my local machine and change the getJSON call accordingly, it works straight away.
Has anyone got any ideas on what could be causing this?
Thanks
Also just to add, if I put the Twitter API url into my browser it displays all the data, which makes it even weirder.
Maybe the problem lies with jsonP, since you are calling a remote server and you must specify you should use jsonP. Have you tried adding callback=? as a parameter
$.getJSON("https://api.twitter.com/1/users/show.json?screen_name=uswitchTech&include_entities=true&callback=?", function(data) {
if (!data.error) {
$("#followers").html(data.followers_count);
}
});
Taken from jQuery docs
JSONP
If the URL includes the string "callback=?" (or similar, as
defined by the server-side API), the request is treated as JSONP
instead. See the discussion of the jsonp data type in $.ajax() for
more details.
$.ajax({
url: 'https://api.twitter.com/1/users/show.json?screen_name=uswitchTech&include_entities=true',
dataType: 'jsonp',
success: function(data){
console.log(data.followers_count);
}
});

How do I pass or parse that access_token from the Dom to a Variable I can then Store and call for access_token?

With help from others I've gotten to the point where I can see the json return from foursquare but any attempts to call it yield an error.
Essentially, if I'm in Firebug and look at the net objects I see the status 200
If I click on the JSON tab I can see my access_token, but how do I extract it from there so I can use for API calls?
Here's the latest code tried.
var jsonUrl = url +"&callback=?";
var access_token;
$("#getJSON").click(function() {
$.getJSON(jsonUrl, { dataType: "JSONP" }, function(json){
...
access_token = json.access_token;
...
});
});
also tried
$.ajax({
dataType: 'jsonp',
jsonp: 'callback',
url: url,
success: function (json) {
console.log(json.access_token);
},
});
But when I try and alert(access_token); or run a foursquare api call I get the following errors
Resource interpreted as Script but transferred with MIME type application/json.
Uncaught SyntaxError: Unexpected token :
checkinsGET https://api.foursquare.com/v2/users/self/checkins?oauth_token=undefined&format=json 401 (Unauthorized)
I feel like its ready and waiting for me to call it, but how on earth do I print it from the Dom into a var that I can use? Been fighting for hours and been trying all my research techniques for some reason this one's elluding me. Thanks for everyone's help so far, I'm really hoping to get passed this!
Try removing the "&callback=?" from the url. I think jQuery adds that for you if you set the dataType to jsonp.
EDIT:
from the jquery ajax documentation describing the dataType parameter:
"jsonp": Loads in a JSON block using
JSONP. Will add an extra "?callback=?"
to the end of your URL to specify the
callback.

Categories