Yahoo - OAuth2 - SocialAPI : Not returning "Access-Control-Allow-Origin" in initial response [duplicate]

Question

I am using Yahoo Social API for Contacts using OAuth2 via Javascript (as given here https://developer.yahoo.com/oauth2/guide/#implicit-grant-flow-for-client-side-apps)

However, after successful authentication and correct Access Token, I am unable to complete the call via JS. The Browser says:

XMLHttpRequest cannot load https://social.yahooapis.com/v1/user/me/contacts
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://..' is therefore not allowed access.

However, when I try PHP's Curl with the same call, it works (hence proves that its not an issue with the token).

Anyone knows how to solve this? Thanks.

Answer 1

So the issue is with https://social.yahooapis.com/ API and not your code, however there are ways around it.

Someone needs to contact the Yahoo Social API Developers and tell them to implement the following solution:

Say for example your aouth2 access token is "XXXXXXXX" and you make the following request to get the userid from your javascript code.

$.ajax({
         url: 'https://social.yahooapis.com/v1/me/guid?format=json',
         beforeSend: function (xhr) {
                        xhr.setRequestHeader ("authorization", "Bearer " + "XXXXXXXX");
                    },
                    success:function(guuid) {
                        console.log(guuid);
                    }
        });

Before actually sending this HTTP GET request to the social.yahooapis.com domain, your browser recognizes this is a CORS request (making a request which is not the same as the origin domain) and does a "preflight check" with HTTP OPTIONS to see if this is a valid call.

This is what the preflight request looks like:

Request Header
:host:social.yahooapis.com
:method:OPTIONS
:path:/v1/me/guid?format=json
:scheme:https
:version:HTTP/1.1
accept:*/*
accept-encoding:gzip, deflate, sdch
accept-language:en-US,en;q=0.8
access-control-request-headers:accept, authorization
access-control-request-method:GET
cache-control:no-cache
origin:http://yourorigin.io
pragma:no-cache
referer:http://yourorigin.io
user-agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_2) AppleWebKit/537.36     (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.3

AND the yahoo API responds back with

Response Header
age:0
allow:OPTIONS,HEAD,GET
content-length:0
content-type:application/vnd.sun.wadl+xml
date:Sun, 10 May 2015 19:21:40 GMT
last-modified:Thu, 30 Apr 2015 13:20:58 PDT
server:ATS
servletwebservicefilter-enabled:true
status:200 OK
vary:Accept
version:HTTP/1.1
via:http/1.1 r18.ycpi.ne1.yahoo.net (ApacheTrafficServer [c sSf ]), https/1.1             r26.ycpi.sjb.yahoo.net (ApacheTrafficServer [c sSf ])
x-yahoo-social-data-source:default_source
x-yahoo-social-host:ws127.progrss.ne1.yahoo.com
y-rid:er2nai1akvbu4

Even though the Reponse comes back with 200OK status it is missing the following Response Header:

Access-Control-Allow-Origin:*

Chrome and other modern web browsers have a safety feature builtin that if you are making a GET CORS request and the Response does not have the Header Access-Control-Allow-Origin then the following message is displayed in the logs REGARDLESS of what is actually returned by the social.yahooapis.com

XMLHttpRequest cannot load https://social.yahooapis.com/v1/me/guid?format=json.
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://yourorigin.com' is therefore not allowed access.

So what you actually get back is :

{   
  "guid" :   
   {   
    "uri": "XXXX",  // URI value  
    "value": "XXXX"   
   }  
 } 

However because of your browsers security features it shows:

No 'Access-Control-Allow-Origin' header is present on the requested resource.

It works fine for people who are using YDN SDK (non browser ways to access the API), server side implementation and old web browser. However doesnt work for new modern browers. Which also explains the inconsistent user experience of it working for some people but not other people in this forum https://developer.yahoo.com/forum/OAuth-General-Discussion-YDN-SDKs/http-social-yahooapis-com-Will-be-right-back/1395509802423-89faffa2-1503-486d-bc29-6505719bd774/

The only way to actually use this right now is to make the GET HTTP request from your server code instead of the client javascript code. And since your server does not have security features it will receive the actual result.

However to fix the issue yahoo developers to add Access-Control-Allow-Origin:* to allow client javascript requests to their api.

I wrote this up because I know many people will be going to the same issue. If this was helpful to you and the issue still hasnt been fixed please contact the yahoo developers and get them to implement this solution.