【问题标题】：Instagram API access_token request and Access-Control-Allow-OriginInstagram API access_token 请求和 Access-Control-Allow-Origin
【发布时间】：2013-12-21 08:55:12
【问题描述】：

上下文

我正在尝试使用他们的server-side/explicit flow 从 Instagram API 获取 访问令牌。

当用户成功验证并授权我的应用程序时，Instagram 会使用 code 参数将用户重定向到我的 redirect_uri。获得此代码后，我将尝试调用 Instagram API 以获取 access_token。

问题

我成功获得此代码，但为了进行此交换，我必须将代码连同一些应用识别参数一起发布到他们的 access_token 端点：

$.ajax({
    type: 'POST',
    url: 'https://api.instagram.com/oauth/access_token',
    // Disable credentials as they were enabled by default
    xhrFields: {
        withCredentials: false
    },
    crossDomain: true,
    data: {
        client_id: client_id,
        client_secret: client_secret,
        grant_type: 'authorization_code',
        redirect_uri: callback_http,
        code: token
    },
    }).always(function(res) {
    console.log('Res from Instagram API', res);
    });

问题是我遇到 Access-Control-Allow-Origin 问题：

XMLHttpRequest cannot load https://api.instagram.com/oauth/access_token.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin '[here is my callback_http]' is therefore not allowed access.

我尝试使用 dataType: 'jsonp' 作为 Ajax 调用的参数，但没有成功（401 代码）。

有什么想法吗？非常感谢您的帮助！

【问题讨论】：

服务器端意味着它必须从你的服务器访问:)

标签： javascript ajax instagram access-token same-origin-policy

【解决方案1】：

使用服务器端显式流时，您必须使用服务器端代码进行 oauth，由于跨域请求，它被浏览器阻止。如果您只想使用 javascript，请使用客户端隐式流程

【讨论】：

好吧，我明白了。无论如何，你有什么解释为什么这个完全相同的流程（由于 NodeJS/Express 路由和 Javascript 在服务器端代码之间的混合）适用于 Dropbox 但不适用于 Instagram？
不确定他们的标题是否有 Access-Control-Allow-Origin:*。另外，您是否在节点中进行上述 instagram ajax 调用？那么它应该可以工作。
这是最好的解释。实际上没有： - 节点匹配 Instagram 重定向后的路由； - 然后呈现进行上述 Ajax 调用的 HTML 页面。我不得不这样做，因为我想将 access_token 发布到我的 API。对我的 API 的每次调用都必须经过签名（感谢 cookie），因此是从客户端进行的。

【解决方案2】：

除非它托管在您的域中或您拥有该网址，否则您不能这样做。

你可以参考这个http://en.wikipedia.org/wiki/Same-origin_policy

如果您是服务器的所有者，您可以使用 htaccess 来解决您的问题。关于如何解决的问题也在stackoverflow中..

编码愉快！ :D

【讨论】：

【解决方案3】：

使用 window.location.href 来避免 cors 问题

window.location.href = https://api.instagram.com/oauth/authorize/?app_id=${clientId}&redirect_uri=${redirectUri}&scope=${scope}&response_type=${responseType}

【讨论】：