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

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

ただいまの
回答率

89.97%

LaravelとAngularを使ったクロスドメインの対処方法を知りたい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 601

some_5656

score 38

前提・実現したいこと

書庫データベースを作成しています。
Laravelがサーバーサイド、Angularがフロントサイドでlaradockを使った環境です。
サーバー・フロントの両方にjwtのライブラリを導入しています。
フロントサイドからある特定の本のデータを取得したいのですが、クロスドメインの問題でデータが取得できません。
ただ、firefoxのコンソール画面では下記のようにステータスが返ってきており、リクエストヘッダと要求ヘッダ、応答タブの中身を見るとデータは返ってきていることがわかりました。
(下記コードはうろ覚えなので間違いがあればご容赦ください)

xml http://localhost/api/book     HTTP 200 OK

クロスドメインや下記問題、該当ソースコードの問題について解決方法がありましたらお教えください。
また、別の方法や考え方など少しでもお知恵を貸していただけると幸いです。

発生している問題・エラーメッセージ

サーバーサイドへAPIリクエストを送りたいのですが、クロスドメインのエラーが出るので下記(試したこと)で対処しましたが、エラーが消えません。

PostmanでAPIリクエストが送れてるかどうか試したところ問題なくリクエストが返ってきました。

クロスオリジン要求をブロックしました: 同一生成元ポリシーにより、http://localhost/api/book にあるリモートリソースの読み込みは拒否されます (理由: CORS ヘッダー ‘Access-Control-Allow-Origin’ が足りない)。

該当のソースコード

フロント側でデータを取得しているコードの抜粋
book.service.ts

getBook() :Observable<Book> {
  const url = `${this.BookUrl}`;
  const $data =  this.http.get(url).pipe(
   map((resp: any) => {
       return rep.data; 
    })
  );
  return $data.pipe(
    catchError(err => {
      return Promise.reject(err);
    })
  );


book.component.ts

ngOnInit() {
 this.book.getBook().subscribe(
  resp => {
    return rep;
  },
  err => {
    console.log(err);  // ここでHttpErrorResponse のエラーが出る
    return err;
  }
);

試したこと

Laravelでクロスドメインアクセスの許可用にミドルウェアを作成。
app/Http/Middleware/Cros.php

public function handle($request, Closure $next)
{
    return $next($request)
        ->header('Access-Control-Allow-Origin', 'http://localhost:4200')
        ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
        ->header('Access-Control-Allow-Headers: Origin, Content-Type, Accept, Authorization');


app/Http/Kernel.php

protected $middleware = [
    ...
    \App\Http\Middleware\Cors::class,
];

Laravelの.htaccesに書いてもみましたがエラーは消えません。

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin http://localhost:4200
</IfModule>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

自己解決しました!
サーバーサイドで行っているクロスドメインのヘッダ追加用のミドルウェアのコードですが、質問で書いたコードが正しくて、実際に書いていたコードは下記でした。
そのため、クロスドメインのエラーが発生しておりました。

↓ 実際にエラーが発生していた時のコード
HTTP動詞がオプションの時だけクロスドメイン許可のヘッダーを追加していたのが原因でした。

public function handle($request, Closure $next)

{
  if ($request->isMethod('options')) {
            return response('', 200)
              ->header('Access-Control-Allow-Origin', 'http://localhost:4200')
              ->header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT, DELETE, OPTIONS')
              ->header('Access-Control-Allow-Headers', 'Origin, Content-Type, Accept, Authorization');
        }
        return $next($request);


質問時に上げたコードはかっこやシングルクォーテーションが抜けていますが、実際のコードは抜けていませんのでかっこなどが抜けていてエラーが起きているわけではないことをここでお伝えしておきます(笑)
自己解決したのもなんですが、大変勉強になりました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 89.97%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる