前提・実現したいこと
書庫データベースを作成しています。
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>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。