Q&A
逆に同じとみなすと
同じIPで複数のドメインが紐づけられている場合（例えばhostsに127.0.0.1 hogehoge とかバーチャルホストとか)
にCORSが突破できてしまう事になってしまう
[ 現状 ]
php artisan preset vueでLaravelにVueを導入して開発しています。
[ 問題 ]
Vue側でLaravelで作成したAPIをコールする際に、以下の文章がコンソール上に表示されます。
Access to XMLHttpRequest at 'http://127.0.0.1:8000/api/login' from origin 'http://localhost:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
調べたところCORSの問題らしいのですが、ここではhttp://127.0.0.1:8000とhttp://localhost:8000は別のオリジンとされているように感じました。
この認識で正しいのかご教授いただければ助かります。
[ 詰まった原因 ]
http://127.0.0.1:8000 = http://localhost:8000という思い込みがある。
※追記
CORS問題はbarryvdh/laravel-corsというCORS用のライブラリを使用して解決しました。
回答3件
0
ベストアンサー
localhostは「このコンピューター」を示すhostname であり、127.0.0.1は IPv4 のループバックアドレスです。一般的には hosts ファイルで127.0.0.1 localhostのように結び付けられているだけで、意味的には完全に同じものではないはずです。したがって、常に同一オリジンとは言い切れません。
The name localhost normally resolves to the IPv4 loopback address 127.0.0.1, and to the IPv6 loopback address ::1.[1]
深読みすると、あくまでnormally「通常は」であり、「絶対」ではありません。
投稿2019/11/06 03:28
総合スコア9427
0
Access-Control-Allow-Origin はシンプルなリクエストになる場合もプリフライトリクエストになる場合もサーバー側がクロスドメインアクセスを許可するか否かを判断して応答ヘッダに含めて返す（許可しない場合は返さない）もののはずです。
下の画像は Fiddler でプリフライトリクエストの場合の要求・応答をキャプチャしてヘッダを見たものです。
なので、想像ですが、http://127.0.0.1:8000 から要求を受けた場合はサーバー側で許可しないので Access-Control-Allow-Origin を応答ヘッダに含めないということのように思えます。
上の画像のように Fiddler を使って違いを調べてみてはいかがですか？
投稿2019/11/06 03:45
退会済みユーザー
総合スコア0
Fiddlerというものは初耳でした。。
試してみます！
かなり助かります！
掲題の「localhostと127.0.0.1は同一オリジンではないのですか？」は本質的な問題ではなくて、サーバーが Access-Control-Allow-Origin を応答ヘッダに含めて返すか否かが問題と思うのですが、違うのでしょうか？
0
結論から言うと、別のオリジンです。
以下のサイトにもあるようにプロトコルとホストとポート番号が一致しなければ同一オリジンではありません。
また、ホストは直接IP指定した場合とドメイン名を書いた場合は明確に区別されます。
また、同一IPに対して、複数ドメイン名を指定した場合も区別されます。
あくまで、名前解決した結果、同じIPに通信しているだけで、HTTPのリクエストヘッダーには、元々のホスト(localhost, 127.0.0.1等）で渡っています。
投稿2019/11/06 03:42
総合スコア253
「ホストは直接IP指定した場合とドメイン名を書いた場合は明確に区別されます。」
なるほどです！
そのあたりの知識がかなり薄かったので、助かります！
回答していただきありがとうございます！
あなたの回答
tips
プレビュー
