XMLHttpRequest 无法为 instagram 加载

Posted 2023-03-03

【中文标题】XMLHttpRequest 无法为 instagram 加载

【英文标题】：XMLHttpRequest cannot load for instagram like

【发布时间】：2014-06-23 00:43:51

【问题描述】：

我想在 instagram 上调用此链接，我正在使用以下代码，但它不起作用。出现以下错误，请帮助我如何从本地主机和服务器调用此 url。

var likeurl = "https://api.instagram.com/v1/media/" + idslist[1] + "/likes?ACCESS_TOKEN="    + accesstoken;
    Nextin_downloadData(likeurl);
    $.ajax(
        url: likeurl,
        type: 'POST',
        data: 

        ,
        success: function (result) 
            alert("out" + result);


        ,

        error: function () 
            alert("error");
        
    );

Error : XMLHttpRequest cannot load       https://api.instagram.com/v1/media/714346267865083830_540073674/likes?  ACCESS_TOKEN=1281148571.506af84.fc2e95e7257fdhgu5thca. No 'Access-Control-Allow-Origin'   header is present on the requested resource. Origin 'http://localhost:2356' is therefore   not allowed access.

【问题讨论】：

在这种情况下使用 POST 可能不是正确的选择，因为跨源 ajax 调用。 $.getJSON() 或 $.ajax( type: GET", dataType: "jsonp") 会更好

这是一个邮局电话收不到请查收。 [instagram.com/developer/endpoints/relationships/…

对不起，我的错误。要启用 CORS，您需要配置服务器设置的 HTTP 标头，例如Apache、IIS 等

没事没问题。我正在使用 IIS 来配置 HTTP 标头？

【参考方案1】：

只需在您的请求末尾添加&callback=?。

【参考方案2】：

您可以在浏览器中使用 jsonp 执行此操作：

$.getJSON(
        'https://api.instagram.com/v1/users/25025320/media/recent/?client_id=YOUR CLIENT ID&callback=?',
        function(data) 
            console.log(data);
        
    );

注意callback=?的添加

【参考方案3】：

不幸的是，这是 Instagram 端的限制。因此，您应该使用服务器端查询。浏览器阻止跨域请求，因为在返回中没有 Allow-origin 标头。 我建议阅读更多关于 CORS 的内容以充分理解这个问题。

例如，如果您使用 php 后端，这就是解决方案：

后端：

<?php
$ch = curl_init();

// set URL and other appropriate options
curl_setopt($ch, CURLOPT_URL,"https://api.instagram.com/v1/media/" . $_REQUEST['id'] ."/likes?ACCESS_TOKEN=" .$_REQUEST['token']);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, 'out'.$_REQUEST['data']);
// grab URL and pass it to the browser
curl_exec($ch);
// close cURL resource, and free up system resources
curl_close($ch);

前端：

$.ajax(
    url: "path.to.backend.php",
    type: 'POST',
    data: 
        id:idslist[1],
        token:accesstoken,
        data:
    ,
    success: function (result) 
        alert("out" + result);
    ,

    error: function () 
        alert("error");
    
);

【讨论】：

服务器拒绝以这种方式调用 url，因为我是从 localhost 调用的，请告诉我如何从 localhost 或其他任何服务器调用它？

@Ashi，当您发送该查询时，服务器以应有的方式回答。但是您的浏览器限制评估结果，因为在 HTTP 标头中不存在 Access-Control-Allow-Origin: * 左右。这就是您需要执行服务器端请求的原因。服务器，使用 CURL 或其他东西，可以发送请求并接受每个答案。

请告诉我应该怎么做才能解决这个问题？

@Ashi，查看答案的变化。

非常感谢。但是我是在dot net mvc4中做的，你能帮我在dot net中怎么做吗？

【参考方案4】：

您被服务器拒绝，因为您尝试跨域（从域 A 呈现的页面调用域 B）并且托管此 API 的服务器不允许这样做。这些保护措施是为了防止恶意 js 代码这样做。

由于这是一个服务器设置，您确定这些 api 是要从 Instagram.com 外部调用的吗？

【讨论】：

如何启用 CORS 或 JSONP？

根据instagram API doc，您添加了一个回调参数，例如“callback=callbackFunction”，这里是一个通用的JSONP示例：***.com/questions/5943630/…