instagram-apicross-origin-read-blocking

api.instagram CORB network error because of jsonp response header with `Content-Type: application/json`


I'm using fetch-jsonp to fetch https://api.instagram.com/oembed/?url=<embedUrl> to use the response.html to embed on my website.

But I'm having a problem on my requests getting a CORB error.

This is my snippet code:

fetchJsonp("https://api.instagram.com/oembed/?url=" + url, {
  timeout: 800,
}).then(function(response) {
  return response.json();
})

My console:

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://api.instagram.com/oembed/?url=<embedUrl> with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details.

I handle embedding from twitter with the same snipped code accessing https://api.twitter.com/1/statuses/oembed.json?url=<embedUrl> and it works fine.

Since twitter response have a Content-Type: application/javascript it works, but instagram response have a Content-Type: application/json and it doesn't.

How can I make this work?


Solution

  • We had the same problem, but switching from jsonp to json did the trick. For example:

    fetch("https://api.instagram.com/oembed/?url=" + url)
      .then(function(response){
        return response.json()
      })
      .then(function(json){
        console.log(json)
      })