XMLHttpRequest 无法加载 <instagram OEMBED URL>。请求的资源上不存在“Access-Control-Allow-Origin”标头

Posted 2023-03-04

【中文标题】XMLHttpRequest 无法加载 <instagram OEMBED URL>。请求的资源上不存在“Access-Control-Allow-Origin”标头

【英文标题】：XMLHttpRequest cannot load <instagram OEMBED URL>. No 'Access-Control-Allow-Origin' header is present on the requested resource

【发布时间】：2014-11-13 21:51:16

【问题描述】：

我正在开发 OEMBED 应用程序，我想请求一些 OEMBED api 来获取我的 JSON 数据。我在后端使用 node/ express，在前端使用 angular。

这是我的服务器代码。

var express = require("express");
var app =express();
var allowCrossDomain = function(req, res, next) 
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');

    // intercept OPTIONS method
    if ('OPTIONS' == req.method) 
      res.send(200);
    
    else 
      next();
    
;
app.use(allowCrossDomain);
app.use(express.static(__dirname + '/js'));
app.get('/',function(req,res,next)
  res.sendfile('index.html');
);
app.listen(3000,function()
  console.log("We are listening at 3000");
);

和我的角码

app.controller('status_controller',function($scope,$http)
  $scope.add_status=function()
      $http.get("http://api.instagram.com/oembed?url=http://instagram.com/p/V8UMy0LjpX/&format=json").success(function(data)
            console.log(data);
          );
    ;
);

执行后，我在控制台中收到此错误。

XMLHttpRequest cannot load http://api.instagram.com/oembed?
url=http://instagram.com/p/V8UMy0LjpX/&format=json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://<<localhost>>:3000' is therefore not allowed access. 

我已经尝试过诸如 cors 和 express-cors 之类的节点包，并且我还尝试了来自 SO 中类似帖子的建议，但没有任何帮助。

我知道我必须对 CORS 做一些事情，但不知道怎么做。

我正在使用 chrome 和 localhost 开发环境。

【问题讨论】：

CORS 帮助远程站点指定它是否允许您通过 javascript 访问其数据 - 因此在这种情况下，Instagram 必须实现此功能，以便您通过 AJAX 访问其数据。

您好，他们已经实现了这个。它在oembed.com 中提到，如果我在浏览器api.instagram.com/oembed?url=http://instagram.com/p/V8UMy0LjpX/… 中点击此网址，那么我会得到服务器返回的数据。

当您直接在浏览器中点击 URL 时，您当然会得到数据——因为那时它不是 JavaScript 发出的请求。 // 看来您应该指定一个回调函数来以 JSONP 格式请求数据。

我在我的角度代码中试过这个。 $http.jsonp("<a href="/default/index/tourl?u=aHR0cDovL2FwaS5pbnN0YWdyYW0uY29tL29lbWJlZD91cmw9aHR0cDovL2luc3RhZ3JhbS5jb20vcC9WOFVNeTBManBYLyZmb3JtYXQ9anNvbiUyMg%3D%3D" rel="nofollow" target="_blank">api.instagram.com/oembed?url=http://instagram.com/p/V8UMy0LjpX/…</a>).success(function(data, status, headers, config) alert("works"); ).error(function(data, status, headers, config) alert("not works"); ); 显示不工作！:(

我遇到了同样的问题。我建议这种解决方法***.com/a/25354788/2575875

【参考方案1】：

如果您使用 AngularJS

yourModule
  .config(function($httpProvider)
    $httpProvider.defaults.useXDomain = true;
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
);

否则在更高版本中不需要这样做。服务器需要设置跨域的东西，即 instagram 之一（而不是您的本地服务器）

【讨论】：

我使用 $http.jsonp("api.instagram.com/oembed?url=http://instagram.com/p/V8UMy0LjpX/…).success(function(data, status, headers, config) alert("works"); ).error(function(data, status, headers, config) alert("not works"); ); 我从他们那里得到响应为 JSON 但不知道如何访问它，因为警报显示不工作消息。

这意味着你没有得到你想要的响应并且它正在失败