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

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

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

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

Laravel 5

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

Q&A

解決済

1回答

2977閲覧

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

some_5656

総合スコア44

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

Laravel 5

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

0グッド

0クリップ

投稿2019/02/06 14:01

編集2019/02/06 14:14

前提・実現したいこと

書庫データベースを作成しています。
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>

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

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

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

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

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

guest

回答1

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);

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

投稿2019/02/07 11:56

some_5656

総合スコア44

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問