I'm trying to use the Twitter oEmbed API to make a request for an embedded tweet. The code is super-simple right now:

xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

xmlhttp.open("GET", ".json?id=507185938620219395", true);
xmlhttp.send();

I'm getting a Cross-Origin Request Blocked error in Firefox. What am I doing wrong?

I'm trying to use the Twitter oEmbed API to make a request for an embedded tweet. The code is super-simple right now:

xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

xmlhttp.open("GET", "https://api.twitter./1/statuses/oembed.json?id=507185938620219395", true);
xmlhttp.send();

I'm getting a Cross-Origin Request Blocked error in Firefox. What am I doing wrong?

• javascript
• ajax
• twitter
• oembed

• This will most likely work! http://kylewbanks./blog/Fetching-Cross-Domain-JSON-Tweets-with-JavaScript-and-JSONP – Timothy Dalton Commented May 5, 2016 at 21:32
• @TimothyDalton link is dead. – subdavis Commented Apr 2, 2017 at 15:55
• @suBDavis try this https://www.google./search?q=Fetching-Cross-Domain-JSON-Tweet‌​s-with-JavaScript-an‌​d-JSONP , it's the first hit – Timothy Dalton Commented Apr 15, 2017 at 6:38

2 Answers 2

The answer is "use jsonp"

$.ajax({
  type:     "GET",
  url:      "http://api.twitter./1/statuses/oembed.json?id=507185938620219395",
  dataType: "jsonp",
  success: function(data){
    console.log(data);
  }
});

https://ctrlq/code/19933-embed-tweet-with-javascript

This one is a workaround for fixing the error

<!--
  Written by Amit Agarwal [email protected]
  Paste this anywhere between the body tag
-->
 
<style>
 
  #tweet {
    width: 400px !important;
  }
 
  #tweet iframe {
    border: none !important;
    box-shadow: none !important;
  }
 
</style>
 
<div id="tweet" tweetID="515490786800963584"></div>
 
<script sync src="https://platform.twitter./widgets.js"></script>
 
<script>
 
  window.onload = (function(){
 
    var tweet = document.getElementById("tweet");
    var id = tweet.getAttribute("tweetID");
 
    twttr.widgets.createTweet(
      id, tweet, 
      {
        conversation : 'none',    // or all
        cards        : 'hidden',  // or visible 
        linkColor    : '#cc0000', // default is blue
        theme        : 'light'    // or dark
      })
    .then (function (el) {
      el.contentDocument.querySelector(".footer").style.display = "none";
    });
 
  });
 
</script>