Javascriptは、今では何でもできてしまうとして、人気も常に上位のプログラミング言語ですが、
サーバーサイドのNodejsとブラウザローカルで動作するJavascriptを混同して考えられているのが増えて困っている人も多いんじゃないでしょうか？
単にホームページを作る時に、わざわざRectorやNext.jsなどのフレームワークを使わずにネイティブHTMLと素のJavascriptでWebサイトを簡易に構築してしまう自分としては、Nodejsを使うなんてサーバー資源のムダ遣い、無駄で無意味のundefinedです。
そしてローカルJavascriptがどうしてもできない事が、
IPアドレスの取得 です。
ECMAscriptのバージョンがどんなに上がっても、GoogleChromeのバージョンが上がっても、自分が使っているMacBookのCPUや性能がどんどん向上しても、JavascriptでIPアドレスの取得はできないんです。
ずっと昔から・・・
そこで、やはり、RestAPI系のやり方で、PHPアクセスでIPアドレスを取得する方法しかないので、今回は、
"Access-Control-Allow-Origin" などにつまずかない様に、コードを書いたのでコードを公開しておきたいと思います。
ソースコード
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IP取得</title>
<script src="ip.js"></script>
</head>
<body>
<input type="text" name="ip" />
</body>
</html>
api.js : Javascript(Ajax)で取得
const xhr = new XMLHttpRequest()
xhr.open('POST' , 'https://example.com/api.php' , true)
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
xhr.onload = loaded
xhr.send()
function loaded(e){
const res = JSON.parse(e.target.response)
console.log(res)
document.querySelector(`[name="ip"]`).value = res.datas.ip
}
api.php : PHPコード
<?php
header("Access-Control-Allow-Origin: *");
header("Content-type:application/json");
$res = get_info(@$_REQUEST["type"]);
$data = [
"status" => $res ? "success" : "error",
"datas" => $res,
];
echo json_encode($data , JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT);
function get_info($type=null){
switch($type){
case "ip":
$ip = $_SERVER['REMOTE_ADDR'];
return $ip ? ["ip" => $ip] : null;
break;
default:
return [
"ip" => $_SERVER['REMOTE_ADDR'],
"port" => $_SERVER['SERVER_PORT'],
"server" => $_SERVER['SERVER_NAME'],
"uri" => $_SERVER['REQUEST_URI'],
"user_agent" => $_SERVER['HTTP_USER_AGENT'],
];
}
}
デモ
あなたの環境の、IPアドレスは、
解説
PHPに書いてある、
header("Access-Control-Allow-Origin: *");
は、Access-Control-Allow-Originアクセスを許可するものです、*（アスタリスク）は全てのアクセスを受け付ける書き方ですが、
ここに、前方一致のURLを書いておけば、それにマッチするURLからのアクセスしか受け付けなくなります。
apacheやnginxに、Access-Control-Allow-Originを設定することも出来ますが、PHPで簡易に行ったほうがその後に内容変更などの対応が簡単だと思います。
※apacheやnginxの方が簡単な場合もあるので、柔軟に捉えてください。
あとがき
こうしたAPI連携は、Javascriptを使う上では非常に重要なポイントなので、APIの技はWebエンジニアとしては欠かせませんね。
PHPじゃなくても、NodejsやPython,Ruby,GO言語・・・サーバーで動作するものであれば、何でもAPI化することができるので、ここは自分が得意な言語でやるのがいいでしょう。
Have a comfortable web programming life.
Javascriptは、今では何でもできてしまうとして、人気も常に上位のプログラミング言語ですが、
サーバーサイドのNodejsとブラウザローカルで動作するJavascriptを混同して考えられているのが増えて困っている人も多いんじゃないでしょうか？
単にホームページを作る時に、わざわざRectorやNext.jsなどのフレームワークを使わずにネイティブHTMLと素のJavascriptでWebサイトを簡易に構築してしまう自分としては、Nodejsを使うなんてサーバー資源のムダ遣い、無駄で無意味のundefinedです。
そしてローカルJavascriptがどうしてもできない事が、IPアドレスの取得です。
ECMAscriptのバージョンがどんなに上がっても、GoogleChromeのバージョンが上がっても、自分が使っているMacBookのCPUや性能がどんどん向上しても、JavascriptでIPアドレスの取得はできないんです。
ずっと昔から・・・
そこで、やはり、RestAPI系のやり方で、PHPアクセスでIPアドレスを取得する方法しかないので、今回は、"Access-Control-Allow-Origin"などにつまずかない様に、コードを書いたのでコードを公開しておきたいと思います。
