"No 'Access-Control-Allow-Origin' header is present on the requested resource"

結局またfreeCodeCampに出戻ろうとしているんですけど、次のプロジェクト「Wikipedia Viewer」をやろうとしたら、なんかapiが動いてくれない。なぜ？？と色々コードをいじって、はっと気付いて開発者ツールを見たら

もー！！これ！！このエラー！！

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access.

毎回これでひっかかってるんだったと思い出しました…。

今回解決するにあたって読んだものをとりあえずメモ。




freeCodeCampのフォーラムで検索してまず引っかかったのがこちら

Brief explanation of CORS, JSONP and CORS proxies
https://forum.freecodecamp.org/t/brief-explanation-of-cors-jsonp-and-cors-proxies/16844

↓上記記事からのリンク
Cross Domain error - i thought i'm using jsonp (?) so what's wrong
https://forum.freecodecamp.org/t/cross-domain-error-i-thought-im-using-jsonp-so-whats-wrong/11012/6

↓ひとつ前のコメント内容が、サンプルコードとして超役に立ちました。
https://forum.freecodecamp.org/t/cross-domain-error-i-thought-im-using-jsonp-so-whats-wrong/11012/5

+今回やりたいのはWikipediaなので、上記コメントのコードとWikipediaの解説を組み合わせて…
https://www.mediawiki.org/wiki/API:Search_and_discovery
＞Clients＞JavaScriptのところにあるコード

↓
できあがったのがこちら（とりあえず固定の検索ワードで、引っ張ってきた結果のタイトルをページ上に表示できるところまで確認）

$(document).ready(function() {
  $.ajax({
    url: "//en.wikipedia.org/w/api.php",
    data: {action: "query", format: "json", list: "search", srsearch: "NASA", srlimit: "10" }, // NASAという固定キーワードで検索
    type: "GET",
    dataType: "jsonp",
    success: function (data){
      $("#resultTitle").html(data.query.search[0].title); // id="resultTitle" を振っているエレメントに結果を表示させる
    },
    xhrFields: {
      withCredentials: false
    } 
  }); // end ajax
});

書き換え前の、うまくいかなかったコード

$(document).ready(function() {
  // Try with Sample URL
  $.getJSON("https:w/api.php?action=query&format=json&list=search&srsearch=NASA&srlimit=10", function(json){
    $("#resultTitle").html(json.query.search[0].title);
  });
});