5

我正在使用通过 Javascript 使用 OAuth2（如此处给出Yahoo Social API的https://developer.yahoo.com/oauth2/guide/#implicit-grant-flow-for-client-side-apps）Contacts

但是，在successful authentication更正之后Access Token，我无法通过 JS 完成调用。浏览器说：

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.

但是，当我使用相同的调用尝试 PHP 的 Curl 时，它可以工作（因此证明它不是令牌的问题）。

任何人都知道如何解决这个问题？谢谢。

4

1 回答 1

7

所以问题在于https://social.yahooapis.com/ API 而不是您的代码，但是有一些方法可以解决它。

有人需要联系 Yahoo Social API 开发人员并告诉他们实施以下解决方案：

例如，假设您的 aouth2 访问令牌是“XXXXXXXX”，并且您发出以下请求以从您的 javascript 代码中获取用户 ID。

$.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);
                    }
        });

在实际将此 HTTP GET 请求发送到 social.yahooapis.com 域之前，您的浏览器会识别出这是一个 CORS 请求（发出与源域不同的请求）并使用 HTTP OPTIONS 进行“预检”以查看如果这是一个有效的调用。

这是预检请求的样子：

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

并且 yahoo API 回复

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

即使响应返回 200OK 状态，它也缺少以下响应标头：

Access-Control-Allow-Origin:*

Chrome 和其他现代 Web 浏览器具有内置的安全功能，如果您正在发出 GET CORS 请求并且响应没有标头 Access-Control-Allow-Origin 则以下消息将显示在日志中，无论实际返回什么通过 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.

所以你实际上得到的是：

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

但是，由于您的浏览器安全功能，它显示：

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

它适用于使用 YDN SDK（访问 API 的非浏览器方式）、服务器端实现和旧 Web 浏览器的人。但是不适用于新的现代浏览器。这也解释了它在这个论坛中为某些人而不是其他人工作的不一致的用户体验https://developer.yahoo.com/forum/OAuth-General-Discussion-YDN-SDKs/http-social-yahooapis-com-右后卫/1395509802423-89faffa2-1503-486d-bc29-6505719bd774/

现在真正使用它的唯一方法是从您的服务器代码而不是客户端 JavaScript 代码发出 GET HTTP 请求。而且由于您的服务器没有安全功能，它将收到实际结果。

然而，为了解决这个问题，雅虎开发人员添加了 Access-Control-Allow-Origin:* 以允许客户端 javascript 请求到他们的 api。

我写这篇文章是因为我知道很多人都会遇到同样的问题。如果这对您有帮助并且问题仍未解决，请联系雅虎开发人员并让他们实施此解决方案。

于 2015-05-10T20:00:21.990 回答