質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CORS

CORSとはCross-Origin Resource Sharingの頭文字をとったもので、ブラウザがオリジン以外のサーバからデータを取得するシステムのことです。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

解決済

3回答

6800閲覧

localhostと127.0.0.1は同一オリジンではないのですか?

kami_tsukai

総合スコア26

CORS

CORSとはCross-Origin Resource Sharingの頭文字をとったもので、ブラウザがオリジン以外のサーバからデータを取得するシステムのことです。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

1クリップ

投稿2019/11/06 03:08

[ 現状 ]
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:8000http://localhost:8000は別のオリジンとされているように感じました。

この認識で正しいのかご教授いただければ助かります。

[ 詰まった原因 ]
http://127.0.0.1:8000 = http://localhost:8000という思い込みがある。

※追記
CORS問題はbarryvdh/laravel-corsというCORS用のライブラリを使用して解決しました。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mikkame

2019/11/06 06:13

逆に同じとみなすと 同じIPで複数のドメインが紐づけられている場合(例えばhostsに127.0.0.1 hogehoge とかバーチャルホストとか) にCORSが突破できてしまう事になってしまう
guest

回答3

0

ベストアンサー

localhostは「このコンピューター」を示すhostname であり、127.0.0.1は IPv4 のループバックアドレスです。一般的には hosts ファイルで127.0.0.1 localhostのように結び付けられているだけで、意味的には完全に同じものではないはずです。したがって、常に同一オリジンとは言い切れません。

Localhost - Wikipedia

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

dodox86

総合スコア9183

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kami_tsukai

2019/11/06 03:41

丁寧で迅速な回答ありがとうございます! 名前が異なるだけで、完全に同じものと捉えていました。 勉強になりました!
guest

0

Access-Control-Allow-Origin はシンプルなリクエストになる場合もプリフライトリクエストになる場合もサーバー側がクロスドメインアクセスを許可するか否かを判断して応答ヘッダに含めて返す(許可しない場合は返さない)もののはずです。

下の画像は Fiddler でプリフライトリクエストの場合の要求・応答をキャプチャしてヘッダを見たものです。

イメージ説明

なので、想像ですが、http://127.0.0.1:8000 から要求を受けた場合はサーバー側で許可しないので Access-Control-Allow-Origin を応答ヘッダに含めないということのように思えます。

上の画像のように Fiddler を使って違いを調べてみてはいかがですか?

投稿2019/11/06 03:45

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kami_tsukai

2019/11/06 03:56

Fiddlerというものは初耳でした。。 試してみます! かなり助かります!
退会済みユーザー

退会済みユーザー

2019/11/06 04:13 編集

掲題の「localhostと127.0.0.1は同一オリジンではないのですか?」は本質的な問題ではなくて、サーバーが Access-Control-Allow-Origin を応答ヘッダに含めて返すか否かが問題と思うのですが、違うのでしょうか?
guest

0

結論から言うと、別のオリジンです。

以下のサイトにもあるようにプロトコルとホストとポート番号が一致しなければ同一オリジンではありません。

Origin (オリジン)

また、ホストは直接IP指定した場合とドメイン名を書いた場合は明確に区別されます。
また、同一IPに対して、複数ドメイン名を指定した場合も区別されます。

あくまで、名前解決した結果、同じIPに通信しているだけで、HTTPのリクエストヘッダーには、元々のホスト(localhost, 127.0.0.1等)で渡っています。

投稿2019/11/06 03:42

LineOfLightning

総合スコア253

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kami_tsukai

2019/11/06 03:59

「ホストは直接IP指定した場合とドメイン名を書いた場合は明確に区別されます。」 なるほどです! そのあたりの知識がかなり薄かったので、助かります! 回答していただきありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問