デプロイしたらwebアプリが動かなくなりました

localでwebアプリケーションを作成していました。
localhostでbackendとflonrendを繋いだ際は完璧に動いたのですが、herokuでデプロイすると "httpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error""
と出てしまい、webアプリが機能しなくなってしまいました。

調べてみるとCORSが原因だと分かったのですが、下記のコードの設定でなぜダメなのかがわからないので助言をいただきたいです

PHP
1cors.php
2
3public function handle($request, Closure $next)
4    {
5        return $next($request)
6            ->header('Access-Control-Allow-Origin', '*')
7            ->header('Access-Control-Allow-Methods', 'GET, POST')
8            ->header('Access-Control-Expose-Headers', 'Authorization')
9            ->header('Access-Control-Allow-Headers', '*');
10    }

typescript
1{
2prokty.conf.ts
3  "*/api": {
4    "target": "mybackendherokuappURL",
5    "secure": true,
6    "changeOrigin": true,
7    "pathRewrite": {
8      "^/api": ""
9    }
10  }
11}

使用言語(フレームワーク)はフロントエンドがAngular,バックエンドはlaravelを使用しています。
ブラウザとサーバー間はAPI通信です

黒く塗りつぶしている部分はbackendへのURLです

hentaiman

2020/11/13 05:01

CORSって事はフロントとバックエンドでドメイン違うんですか？

sagitarou

2020/11/13 05:03

はい。違います。フロントとバックを分離して作成し、それぞれでデプロイしています

hentaiman

2020/11/13 05:09 編集

レスポンスは200OK以外を返しますか？ 200OKだったら動きますか？

sagitarou

2020/11/13 05:16 編集

開発者ツールのNetworkタブに書かれているレスポンスは(falled)net::ERR_FAILEDとかえってきています consoleに書かれているレスポンスstatusは0でした

hentaiman

2020/11/13 05:17

CORSのエラーだったら（サーバー側に関しては）今の設定でも正常レスポンスなら返ってくると思うし、サーバー側が正常動作した上でエラーを返しているのならエラーログには何も出ていないと思うけど、その辺り問題無いですか？処理エラーありませんか？あとangularの事は分からないですが、単純にcors設定を忘れているとかはないですか？

sagitarou

2020/11/13 05:24

すいません。もしかしたらサーバー側が正常に動いていない可能性が出てきました。フロント側をhocalのままデプロイしているサーバー側にアクセスしても同じエラーが出てきました。あと、angularにはcorsの設定はしていないです。やり方わかりませんでした

hentaiman

2020/11/13 05:28

そうですか CORSのエラーならもっと別の内容が出てくるはずで、 > {headers: HttpHeaders, status: 0, statusText: "Unknown Error"" 少なくともこの部分を省略せず全て見せてくれないと原因予測すらできません > angularにはcorsの設定はしていないです。やり方わかりませんでした生javascriptだとあるので、angularにもあると思うので調べてみてください。※先に書いた通り自分は分かりません

sagitarou

2020/11/13 05:30

ありがとうございます。 errorの部分の詳細に表示したものを追記させていただきたいと思います

hentaiman

2020/11/13 05:40

サーバー側が返しているステータスコードは分かりますか？ angularは素だと何でもかんでも0扱いらしいですね。 ※https://kakkoyakakko2.hatenablog.com/entry/2018/06/26/003000

sagitarou

2020/11/13 05:45

サーバーが返しているステータスコードが(failed )net::ERR_INVALID_REDIRECTとなっています

hentaiman

2020/11/13 05:52

それはクライアント側で確認できるログですよね？サーバー側のログ表示がそれですか？

sagitarou

2020/11/13 06:31

Networkタブのアクセスnameの横にあるstatusがサーバーの返しているステータスコードではないのでしょうか。その辺があまり分かっていなくて、申し訳ないです。

hentaiman

2020/11/13 06:42

違いますね、ステータスコードは数字です。 https://developer.mozilla.org/ja/docs/Web/HTTP/Status サーバー側のログを確認してください。 https://stackoverrun.com/ja/q/3717403 とりあえずCORS以前の問題が起きているだろうと思ってるので色々質問しています。

sagitarou

2020/11/13 07:22

ありがとうございます。 backendから返ってきているstatusなのですが301でした

hentaiman

2020/11/13 08:01

となるとCORS以前の問題なのでまずは自分の作ったプログラムや設定を見直しましょう https://developer.mozilla.org/ja/docs/Web/HTTP/Status/301

sagitarou

2020/11/13 08:20

ありがとうございます。 cors以前のプログラムの問題なのでしたら、なぜ両方localで動かした時には動いてデプロイした途端動かなくなったのかという疑問が残ってしまいます。

hentaiman

2020/11/13 08:25

それは質問者自身にしか分かりません CORSを疑うのならlocalでフロントとバックでドメイン変えて試してみれば？それでも同じ現象が起きるならプログラムが悪いし、起きないならherokuの反映する上での設定が悪いんでしょう