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

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

新規登録して質問してみよう
ただいま回答率
85.35%
Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

CORS

CORSとはCross-Origin Resource Sharingの頭文字をとったもので、ブラウザがオリジン以外のサーバからデータを取得するシステムのことです。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

解決済

1回答

2820閲覧

Nuxt.jsとLaravelのAPIでAjax通信した際のCORSエラーが解消できない

RyoS_

総合スコア4

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

CORS

CORSとはCross-Origin Resource Sharingの頭文字をとったもので、ブラウザがオリジン以外のサーバからデータを取得するシステムのことです。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

0クリップ

投稿2021/06/07 12:02

編集2021/06/27 04:27

前提・実現したいこと

Nuxt.jsとLaravelのAPI通信ができるようにしたい。

現在Nuxt.jsとLaravelでLIFFアプリを作っています。
Nuxt.jsからAxiosでAPIを叩いた時、CORSエラーが発生しました。

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

'https://line-form-frontend.netlify.app'から'https://50a7e4b5197c.ngrok.io/api/'のXMLHttpRequestへのアクセスは、CORSポリシーによりブロックされている。
プリフライトリクエストへのレスポンスがアクセスコントロールチェックを通過しません。
リクエストされたリソースに'Access-Control-Allow-Origin'ヘッダーが存在しません。

Access to XMLHttpRequest at 'https://50a7e4b5197c.ngrok.io/api/' from origin 'https://line-form-frontend.netlify.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

コンソール

イメージ説明

試したこと

①PostmanでAPIが動くことを確認

問題なく取得できました。

イメージ説明

②CORSの対応

フロントエンド

nuxt.config.js
proxy: { '/api': environment === 'development' ? process.env.API_URL : 'https://www.example.org', }, axios: { baseURL: process.env.API_URL, browserBaseURL: process.env.API_BROWSER_URL, credentials: true, },
.env
# API API_URL=http://web/api API_BROWSER_URL=https://50a7e4b5197c.ngrok.io/api

バックエンド

Middleware/Cors.php
<?php namespace App\Http\Middleware; use Closure; class Cors { public function handle($request, Closure $next) { return $next($request) ->header('Access-Control-Allow-Origin', 'https://line-form-frontend.netlify.app/') ->header('Access-Control-Allow-Methods', 'GET, POST') ->header('Access-Control-Allow-Headers', 'Content-Type, X-XSRF-TOKEN') ->header('Access-Control-Allow-Credentials', 'true'); } }
Kernel.php
protected $routeMiddleware = [ 'auth' => \App\Http\Middleware\Authenticate::class, 'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class, 'bindings' => \Illuminate\Routing\Middleware\SubstituteBindings::class, 'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class, 'can' => \Illuminate\Auth\Middleware\Authorize::class, 'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class, 'password.confirm' => \Illuminate\Auth\Middleware\RequirePassword::class, 'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class, 'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class, 'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class, 'cors' => \App\Http\Middleware\Cors::class, ];
route/api.php
Route::middleware(['cors'])->group(function () { Route::get("/", function () { return "Hello World!"; }); });

この時点でのエラー内容

イメージ説明

レスポンスヘッダに Access-Control-Allow-Originなどがありませんでした。

③プラグインの追加

plugins/axios.js

export default function({ $axios, redirect }) { $axios.onResponse(config => { $axios.setHeader('Access-Control-Allow-Origin', process.env.API_BROWSER_URL); $axios.setHeader('Access-Control-Allow-Methods', 'GET,HEAD,PUT,PATCH,POST,DELETE'); $axios.setHeader( 'Access-Control-Allow-Headers', 'X-Requested-With, Origin, X-XSRF-TOKEN, Content-Type, Accept, X-CSRD-TOKEN' ); $axios.setHeader('Access-Control-Allow-Credentials', 'true'); }); }

イメージ説明
イメージ説明

Access-Control-Allow-Originなどをレスポンスヘッダに設置することはできました。
しかし、エラーメッセージで**「リクエストされたリソースに'Access-Control-Allow-Origin'ヘッダーが存在しません。」**と返ってきているのでどうすべきかがわかりません。

気になること

こちらの記事でRails+Nuxt.jsなので若干違いますが、Dockerコンテナ経由だとproxy(代理サーバ)を立てて通信を行う方法はうまくいかないとありました。

Rails側でリクエストがくるドメインを許可する方法で設定したとありました。
Laravelで言うと、Middleware/Cors.phpで行った設定でいいのかなと思ったのですがこちらでもうまくいきませんでした。

CORSエラーの解消にはどのようなことが必要なのでしょうか?
大変恐縮ですが、ご教授お願いいたします。

追記

Postmanのヘッダー情報

イメージ説明

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

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

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

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

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

hentaiman

2021/06/07 12:29

postmanってやつで試した時ののレスポンスヘッダーは?
RyoS_

2021/06/07 12:34

ご連絡ありがとうございます。 Postmanのヘッダー情報を追記いたしました。
guest

回答1

0

自己解決

.envが正しく読み取れていないことが原因でした。

投稿2021/06/27 04:28

RyoS_

総合スコア4

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問