CORSでXMLHttpRequest がエラーになる対処方法


はじめに

GitHub Pagesで電車遅延を知らせるWebページを作っていた時にCORSにハマったので対処方法をまとめました。


環境

ブラウザ:chrome バージョン 74


JavaScript

const xhr = new XMLHttpRequest();

xhr.open("GET", `https://rti-giken.jp/fhc/api/train_tetsudo/delay.json`, true);
xhr.responseType = 'json';
xhr.onreadystatechange = function() {
if(xhr.readyState === 4) {
if(xhr.status === 200) {
//
// JSON遅延データ処理
//
}
}
};
xhr.send();


エラーメッセージ

実行すると以下のメッセージが出る。

Access to XMLHttpRequest at 'https://rti-giken.jp/fhc/api/train_tetsudo/delay.json' from origin 'https://username.github.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.


対処方法

chrome.exeの起動オプション(引数)に --disable-web-security、--disable-web-securityを付ける。クライアント側の対応のみで解決する。


参考

Access-Control-Allow-Originのエラーを回避してWebサービスを呼ぶには?

鉄道遅延情報のjson