Ajax PHP 〜Ajax通信エラー No ‘Access-Control-Allow-Origin’ 〜

No 'Access-Control-Allow-Origin'

こんなエラーが出ました。JavaScriptで以下のようなコードを実行したときです。

    xhr = new XMLHttpRequest();
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = recieveResponse
   xhr.open('GET', 'https://zenryokuservice.com/tools/maps/InsertMapInfo.php?param=test', true);
    xhr.send();


SampleMap.html:1 Access to XMLHttpRequest at 'https://zenryokuservice.com/tools/maps/InsertMapInfo.php?param=test' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

答え

異なるドメインから呼び出すと、このようになるようです。
セキュリティの問題なようです。まぁ確かによろしくはないですね。。。参考サイトより

対応

実はこのコードは自分のPCから直接実行しました。運用するときは自分のレンタルサーバー上にJSを配置するのでこの問題は起きません。。。
なのでサーバーにアップして再度実行します。

こんな感じでAjax通信のテストを完了できました。

作成したものはここにあります。

https://zenryokuservice.com/sample/js/SampleMap.html

次は

作成したフォームを送信します。



関連ページ

  1. JS GoogleMaps API 〜オリジナル・データマップを作ろう〜
  2. Github page Github pageでリポジトリの情報を公開しよう〜
  3. 夢を形にする① 目標ブレーク〜じゃんけんゲームの場合〜
  4. プログラム 習得 順序1 概要
  5. Githubページ関連

  6. Github page Github pageでリポジトリの情報を公開しよう〜
  7. Github 使い方〜リポジトリにライセンスを設定する〜
  8. Github 使い方〜Issueでやることを整理〜
カテゴリーAjax