こんにちは、kikuです。
今日はサーバー間で通信処理をjavascriptでしたいと思った時の実装例を記述していきます。

方法は色々あるかと思いますが、今回はajaxでやる方法について記述していきます。

ajaxでhoge.comにGETアクセスする処理例

クライアント側のコード例（hoge.comでないサーバーのコード）

    jQuery.ajax( {
        url: 'http://hoge.com',
        type: 'GET',
        success: function( data ) {
            console.log('通信に成功しました。');
        },
        error: function( data ) {
            console.log('通信に失敗しました。');
        }
    } );

サーバー側のコード例（hoge.comのコード）

header('Access-Control-Allow-Origin: *');
echo '成功です';

セキュリティの問題でサーバー側にも対応が必要なんです。
別のサーバーから無許可でアクセスが来て勝手にレスしていたら怖いですから当然ですね。

Access-Control-Allow-Origin:で許可するオリジンを決めます。

特定のオリジンのみ許可をする場合はこんな感じ

header('Access-Control-Allow-Origin: http://hoge.com');

クッキー情報を付けてアクセスしたい場合は

クライアント側のコード例（hoge.comでないサーバーのコード）

    jQuery.ajax( {
        url: 'http://hoge.com',
        type: 'GET',
        xhrFields: {
            withCredentials: true
        },
        success: function( data ) {
            console.log('通信に成功しました。');
        },
        error: function( data ) {
            console.log('通信に失敗しました。');
        }
    } );

サーバー側のコード例（hoge.comのコード）

header('Access-Control-Allow-Origin: ' . getenv('HTTP_ORIGIN'));
header('Access-Control-Allow-Credentials: true');
echo '成功です';

サーバー側にAccess-Control-Allow-Credentials: trueが必要になります。
更にAccess-Control-Allow-Origin:に*が使えません。
ですが基本的にgetenv('HTTP_ORIGIN')で取得可能な場合が多いのでこれを付けておけば大体OKです。
※ダメだった場合は色々制限や工夫をすればいけますが省略します

今回はGETアクセスのみの紹介です。
POSTとかはまた色々やらなくてはいけませんので気をつけて下さい。。

 

参考
・https://developer.mozilla.org/ja/docs/HTTP_access_control