我无法使用JSON中的Instagram图像的URL

Question

我正在开发一个API，以从特定的主题标签中获取数据。

此JSON它以不同的分辨率返回图像，但它是一个错误的URL，我无法使用此图像，我不知道如何解决该问题。

url： https://wwwww.instagram.com/explore.com/explore/xplore/tags/jeep/jeep/jeep /？__ a = 1

错误：get https://scontent-gru1-1.cdninstagram.com/v/t51.2885-15/284660975_5107249660606061398_8181818596589777777183559999_JPGIN.JPGIN.JPTICTING 40_SH0.08＆amp; _nc_ht = scontent-gru1-1.cdninstagram。 com&_nc_cat=110&_nc_ohc=DOEOKz-tf2UAX98qbHQ&edm=AABBvjUBAAAA&ccb=7-5&oh=00_AT-Im7KGjYftnZu6Am-_FV7RKW7CVDcYmyzhU1zB0vKCvg&oe=629F3ED8&_nc_sid=83d603 net::ERR_BLOCKED_BY_RESPONSE.NotSameOrigin 200

Index. JS

const express = require("express");
const morgan = require("morgan");
const bodyParser = require("body-parser");

// Routes
const routeLogin = require('./routes/login');
const routeRegister = require('./routes/register');
const routeHashtags = require('./routes/hashtag');

const app = express();
const cors = require("cors");



// Use
app.use(cors())

// Morgan
app.use(morgan("dev"));

// Body parser
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());



// Routes
app.use('/login', routeLogin);
app.use('/register', routeRegister);
app.use('/hashtag', routeHashtags);

// Error
app.use((req, res, next) => {
  const error = new Error("Erro! Não encontrado!");
  error.status = 404;
  next(error);
})

app.use((error, req, res, next) => {
  res.status(error.status || 500);
  return res.send({
    error: {
      message: error.message
    }
  })
})



module.exports = app;

我如何获取数据

async function dashboard(){
  async function pendingPosts(){
    let divPendImages = document.getElementById("pendingPosts_images");
    let ctaNo = document.getElementById("pendingPosts_cta_no")
    let ctaYes = document.getElementById("pendingPosts_cta_yes")

    // Get data
    const res = await fetch("http://localhost:3120/hashtag/")
                      .then((res) => res.json())
                      .then((data) => {return data.response})

    // Show data
    function showData(){
      console.log(res.length)

      res.forEach((element, index) => {
        // Img
        let img = document.createElement("img")
        let src = element.node.thumbnail_src;
        img.src = src;

        ctaNo.parentNode.querySelector("input").value = src;
        ctaYes.parentNode.querySelector("input").value = src;

        // CTA
        if(index == 0){
          ctaNo.parentNode.action = `http://localhost:3120/hashtag/notadd/${element.node.id}`;
          ctaYes.parentNode.action = `http://localhost:3120/hashtag/create/${element.node.id}`;
        }

        // Append img
        divPendImages.appendChild(img);
      });
    }
    showData()
  }
  pendingPosts()
}
dashboard()

Answer 1

想象一下，如果某些受欢迎的社交媒体人员发布了指向 小松体托管website.com 的链接，该链接每秒只能处理10个请求。如果该人足够受欢迎，他们可能会有10个以上的关注者遵循他们的链接并删除小型网站。这可能是恶意的（例如，社交媒体人对该网站怀有怨恨）或无意的（社交媒体人都不会理解服务器的工作原理）。

因此，像Chrome这样的浏览器允许服务器/站点添加提示是否要接受其他起源的请求。尽管在HTTPS框架中进行了标准化，但这完全是可选的，只是提示。即，这取决于客户端（例如Web浏览器）来强制执行该策略，而不是服务器（因为这会违反最小化服务器流量的目的）。

解决此问题的方法是：

1. 与服务器联系（在您的情况下为Instagram），并询问他们是否有意。如果这是公共API，并且他们打算让任何人能够消耗这些URL，那么他们可能会偶然地忘记删除Cross Orgins限制

2. 使用不尊重交叉原产性策略的客户端。例如 curl ， electron ，而独立应用程序不会执行交叉起源策略。大多数浏览器可能也有禁用其执行的标志。

查看 mdn> mdn 或搜索'cors'资源共享）用于更多背景。