Laravelのpaginate()メソッドでかえってくる項目の中にhttpsがついていないのでhttpsにしたい

Question

事象

下記のチュートリアルを見てサイトを完成させました。ローカル環境では問題なく動いていました。
herokuにアップすると詳細画面は表示されますが一覧画面が表示されません。（投稿が一件も表示されない）

https://www.hypertextcandy.com/vue-laravel-tutorial-list-photos/

ブラウザのコンソールにエラーが出ているのが原因だと思いました。

laravelのpaginate()メソッドが返すjsonの中にhttpのアドレスが含まれているせいだと思うのでこれを、httpsにする方法が知りたいです。

エラー内容

Mixed Content: The page at 'https://<アプリ名>.herokuapp.com/?page=1' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://<アプリ名>.herokuapp.com/api/photos?page=1'. This request has been blocked; the content must be served over HTTPS.

app/Http/Controllers/PhotoController.php

    /**
     * 写真一覧
     */
    public function index()
    {
        $photos = Photo::with(['owner', 'likes'])
            ->orderBy(Photo::CREATED_AT, 'desc')->paginate();

        return $photos;
    }

Jsonの中身

{ 
   "current_page":1,
   "data":[ 
      { 
         "id":"EcrjI8oSchZG",
         "url":"https://<バケット名>.s3.ap-northeast-1.amazonaws.com/EcrjI8oSchZG.jpeg",
         "likes_count":0,
         "liked_by_user":false,
         "owner":{ 
            "name":"<名前>"
         }
      },
      { 
         "id":"nQAlljx922x3",
         "url":"https://<バケット名>.s3.ap-northeast-1.amazonaws.com/nQAlljx922x3.jpeg",
         "likes_count":0,
         "liked_by_user":false,
         "owner":{ 
            "name":"<名前>"
         }
      },
      { 
         "id":"DXcd2dMOE2J6",
         "url":"https://<バケット名>.s3.ap-northeast-1.amazonaws.com/DXcd2dMOE2J6.jpeg",
         "likes_count":0,
         "liked_by_user":false,
         "owner":{ 
            "name":"<名前>"
         }
      }
   ],
   "first_page_url":"http://<アプリ名>.herokuapp.com/api/photos?page=1",
   "from":1,
   "last_page":1,
   "last_page_url":"http://<アプリ名>.herokuapp.com/api/photos?page=1",
   "next_page_url":null,
   "path":"http://<アプリ名>.herokuapp.com/api/photos",
   "per_page":15,
   "prev_page_url":null,
   "to":3,
   "total":3
}

環境

Laravel Framework 5.8.35

Answer 1

herokuの場合
一旦sslを受け止めたサーバがリバースプロキシしたAPサーバにHTTPでプロキシするようになっているので
ブラウザではHTTPSだがLaravelはHTTPでアクセスされたと誤認します。

こういうのを参考に
HTTPSを強制しましょう

Comments

[zfanr]

mikkameさん

回答いただきありがとうございます。

web.phpとapi.phpに以下の記述を足してみたのですが一覧画面の写真は表示されないままでした。

```
URL::forceScheme('https');
```

そこで、よく見て見るとajaxリクエストが2回発生しており1回目のリクエスト（photosの後にスラッシュが付いている）がキャンセルとなっていて2回目のリクエスト（photosの後にスラッシュが付いていない）が失敗となっておりました。

1回目　https://<アプリ名>.herokuapp.com/api/photos/?page=1
2回目　http://<アプリ名>.herokuapp.com/api/photos?page=1

これはローカルの時も同様に2回発生しており、ローカルでは１回目が301moved permanently（今、手元に作業していたパソコンがないので301のコードなどについては記憶が少しだけ曖昧ですが） となっており2回目のリクエストで正常にレスポンスが返ってきていました。

ローカルでもheroku環境でもスラッシュつきのアドレスにリクエストするとリダイレクト？のようなものが発生して、スラッシュなしのほうにもう一度リクエストするようでした。その際にheroku環境ではhttpsがhttpになるのが原因のようでしたので、リクエストする箇所をスラッシュなしにすること1回目のリクエストで正常にレスポンスが取得できて一覧ページの写真が表示されました。

PhotoList.vue
変更前
```
async fetchPhotos () {
const response = await axios.get(`/api/photos/?page=${this.page}`)
/* 略 */
}
```

変更後
```
async fetchPhotos () {
const response = await axios.get(`/api/photos?page=${this.page}`)
/* 略 */
}
```

ただ、写真の表示自体はできましたが、jsonの中のアドレスは以下のようにhttpになってしまっているのでこれはこれで問題だと思っております。その際にご提示いただいた内容の対策が必要なのかなと思っています。
"next_page_url":"http://<アプリ名>.herokuapp.com/api/photos?page=2"

herokuのサーバーの仕様についても教えていただいてありがとうございます。

[zfanr]

写真の表示自体はできたので一旦これでクローズいたします。
ありがとうございました。

[mikkame]

スラッシュ付きをスラッシュなしに変更するのはlaravelの仕様です。
htaccessを確認してみてください。
リダイレクト処理が書いてあるはずです

[zfanr]

htaccessに記述がありました。（なんとなく理解できるレベルです）
この処理がhttpsをhttpに変えてしまっていたのですね

# Redirect Trailing Slashes If Not A Folder...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} (.+)/$
RewriteRule ^ %1 [L,R=301]

いろいろ調べて下記などが関係するのかなと思いました。ただ、いろいろ試していたら挙動がよくわからなくなってしまいましたが、教えていただきありがとうございます。
https://help.heroku.com/J2R1S4T8/can-heroku-force-an-application-to-use-ssl-tls
https://stackoverflow.com/questions/1329647/force-ssl-https-with-mod-rewrite/34065445#34065445