Twitterのoembed APIを使って、urlからツイートのjsonを取得し、ページに出力する方法が知りたいです。

Question

ツイートをblockquoteで埋め込むのではなく、ツイートのurlをjsで処理して表示したいです。

//Twitter Developerのサンプル

https://publish.twitter.com/oembed?url=https%3A%2F%2Ftwitter.com%2FInterior%2Fstatus%2F507185938620219395

上記urlにアクセスしてjsonデータは取得できたのですが、これをfetchAPIを使ってページに出力する方法がわかりません。

試しに

function (){
  var url = 'https://publish.twitter.com/oembed?url=https%3A%2F%2Ftwitter.com%2FInterior%2Fstatus%2F507185938620219395';
  fetch(url).then(function(response) {
    console.log(response);
    return response();
  }).then(function(json) {
    console.log(json);
  });
}

と書いてみたのですが、

Access to fetch at 'https://publish.twitter.com/oembed?url=https%3A%2F%2Ftwitter.com%2FInterior%2Fstatus%2F507185938620219395' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Uncaught (in promise) TypeError: Failed to fetch

というエラーが出てしまいます。

Answer 1

エラー内容はクロスオリジンのエラーっぽいです。
あとfetchの書き方もJSONだと以下になるかと思います。
ただ、以下の記述をしても参考のJSONデータは読み込めないかと。
普通はブラウザでURL叩いたらJSON（参考:http://www.youtube.com/oembed?url=http%3A//www.youtube.com/watch%3Fv%3DbDOYN-6gdRE&format=json）データが見れますが、こちらの場合はダウンロードされてしまいます。
oembedが詳しくないので恐縮ですが、
twitterのoembedはこちら（https://syncer.jp/Web/API/Twitter/REST_API/GET/statuses/oembed/）を参考にしてみてはいかかでしょうか？

  const url = 'https://publish.twitter.com/oembed?url=https%3A%2F%2Ftwitter.com%2FInterior%2Fstatus%2F507185938620219395';
  fetch(url, { credentials: 'include' }).then(function(response) {
    if (!response.ok) {
      throw Error(response.statusText);
    }
    return response.json();
  }).then(function(json) {
    console.log(json);
  });