CODEWITHSUNDEEP
javascriptnode.jsapiinstagram
GabssRuizz
GabssRuizz

Reputation: 95

I'm not able to use the url of the instagram image that comes in the json

I'm developing an api to get data from a specific hashtag.

This json it returns the image in different resolutions, but it's a url that gives an error, I can't use this image and I don't know how to solve the problem.

URL: https://www.instagram.com/explore/tags/jeep/?__a=1

Error: GET https://scontent-gru1-1.cdninstagram.com/v/t51.2885-15/284660975_5107249636061398_8185965897577183599_n.jpg?stp=dst-jpg_e35_p640x640_sh0.08&_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;

How am I getting the data

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()

Upvotes: 0

Views: 699

Answers (1)

junvar
junvar

Reputation: 11574

Imagine if some popular social media person posts a link to small-locally-hosted-website.com that can only handle 10 requests per second. If the person's popular enough, they might have more than 10 followers follow their link and take down the the small website. This could be malicious (e.g. the social media person has a grudge against the site) or unintentional (the social media person is not expected to understand how servers work).

So browsers like chrome allow servers/sites to add a hint whether they want to accept requests from other origins. Though standardized in the https framework, this is totally optional and just a hint. I.e., it's up to clients (e.g. web browsers) to enforce the policy, and not the server (as that would defeat the purpose of minimizing server traffic).

The way around this is either:

  1. Contact the server (instagram in your case) and ask them if this is intentional. If it's a public API and they intend for these URLs to be able to be consumed by anyone, it may be accidentally they forgot to remove the cross orgins restrictions

  2. Use a client that doesn't respect the cross origin policy. E.g. curl, electron, and standalone apps don't enforce the cross origins policy. Most browsers probably have flags that would disable their enforcement as well.

Look at MDN or search for 'CORS' (Cross origin resource sharing) for more background.

Upvotes: 1

Related Questions