Question

对于项目，我从多个社交网络中检索图片。我使用Pinterest，我可以列出引脚并用URL显示它们。但是当我想下载带有XMLHttpRequest的图片时，我收到一个CORS错误。

是因为Pinterest的政策还是有其他方式可以做到？

这是我的代码

console.log("Url de l'image: " + this.snURL);
            //bug avec Pinterest
            var xhr = new XMLHttpRequest();
            var _self = this;
            xhr.onload = function () {
                var reader = new FileReader();
                reader.onloadend = function () {
                    console.log(reader.result);
                    _self.initRealisationLocalStorage();
                    workInProgress.Start('Traitement de l\'image');
                    workInProgress.Info('Traitement de l\'image');
                    $scope.uploadPhotoNotLocalstorage(reader.result);
                }
                reader.readAsDataURL(xhr.response);
            };
            xhr.open('GET', this.snURL);
            //xhr.setRequestHeader("Access-Control-Allow-Origin","*");
            xhr.responseType = 'blob';
            xhr.send();
});

如果有人有解决方案或进行解释，我会很高兴听到它

Answer 1

直接从浏览器调用另一个域（javascript）时，有一个安全措施可以防止任意包含外部数据。

当允许这样做时，通常是服务器定义CORS标题＆＃34; Access-Control-Allow-Origin＆＃34;但我想Pinterest可以添加每个调用其API的域名。

为此，他们建议使用他们的SDK here，它将使用您在Pinterest App中配置的重定向网址。作为后备，否则他们将使用postMessage API

我不认为您可以通过JavaScript直接向他们的API调用AJAX（浏览器端的CORS限制），请参阅this post。

另一种可能性是创建一个代理后端（如node.js项目），它可以查询Pinterest API，然后从您的Javascript AJAX中查询您的代理您不会遇到CORS问题，因为后端调用将在您身边，即使它部署在不同的域中，您也可以自己在该后端设置CORS头。

我认为SDK方式可以解决您的问题，它似乎是直接从浏览器调用API时唯一的方法。

检索图片时出现Pinterest CORS错误

1 个答案: