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

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

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

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

PHP

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CORS

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

API

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

Q&A

解決済

2回答

5090閲覧

LaravelでCORSが解決できない

naochan1214

総合スコア16

Laravel

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

PHP

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CORS

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

API

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

0グッド

0クリップ

投稿2021/02/01 02:00

編集2021/02/01 02:41

現在LaravelでAPIを開発していますが、ライブラリを使用してもCORSが解決できません。
Dockerを使用せずにAPIを起動しましたが、こちらもダメでした。
一様、直接ブラウザやPostmanでのアクセスでは、正常にレスポンスが返ってきました。

GitHubリポジトリ
https://github.com/kbc18a11/mimawarikunapi
使用技術

  • Docker-Compose: 3
  • Laravel:8.22.1

docker-compose.yml

yaml

1version: "3" 2 3services: 4 php: 5 container_name: php 6 build: ./php 7 ports: 8 - 8080:80 9 volumes: 10 - ./api:/var/www 11 12 nginx: 13 image: nginx 14 container_name: nginx 15 ports: 16 - 8085:80 17 volumes: 18 - ./api:/var/www 19 - ./nginx/default.conf:/etc/nginx/conf.d/default.conf 20 depends_on: 21 - php 22 23 db: 24 image: mysql:5.7 25 container_name: db 26 env_file: ./.env 27 environment: 28 MYSQL_ROOT_PASSWORD: $MYSQL_ROOT_PASSWORD 29 MYSQL_DATABASE: $MYSQL_DATABASE 30 MYSQL_USER: $MYSQL_USER 31 MYSQL_PASSWORD: $MYSQL_PASSWORD 32 TZ: "Asia/Tokyo" 33 command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci 34 volumes: 35 - ./db/data:/var/lib/mysql 36 - ./db/my.cnf:/etc/mysql/conf.d/my.cnf 37 - ./db/sql:/docker-entrypoint-initdb.d 38 ports: 39 - 3306:3306 40

Kernel.php

php

1<?php 2 3namespace App\Http; 4 5use Illuminate\Foundation\Http\Kernel as HttpKernel; 6 7class Kernel extends HttpKernel 8{ 9 /** 10 * The application's global HTTP middleware stack. 11 * 12 * These middleware are run during every request to your application. 13 * 14 * @var array 15 */ 16 protected $middleware = [ 17 \Fruitcake\Cors\HandleCors::class, 18 // \App\Http\Middleware\TrustHosts::class, 19 \App\Http\Middleware\TrustProxies::class, 20 \App\Http\Middleware\PreventRequestsDuringMaintenance::class, 21 \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class, 22 \App\Http\Middleware\TrimStrings::class, 23 \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class, 24 ]; 25 26 /** 27 * The application's route middleware groups. 28 * 29 * @var array 30 */ 31 protected $middlewareGroups = [ 32 'web' => [ 33 \App\Http\Middleware\EncryptCookies::class, 34 \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class, 35 \Illuminate\Session\Middleware\StartSession::class, 36 \Laravel\Jetstream\Http\Middleware\AuthenticateSession::class, 37 \Illuminate\View\Middleware\ShareErrorsFromSession::class, 38 \App\Http\Middleware\VerifyCsrfToken::class, 39 \Illuminate\Routing\Middleware\SubstituteBindings::class, 40 ], 41 42 'api' => [ 43 'throttle:api', 44 \Illuminate\Routing\Middleware\SubstituteBindings::class, 45 ], 46 ]; 47 48 /** 49 * The application's route middleware. 50 * 51 * These middleware may be assigned to groups or used individually. 52 * 53 * @var array 54 */ 55 protected $routeMiddleware = [ 56 'auth' => \App\Http\Middleware\Authenticate::class, 57 'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class, 58 'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class, 59 'can' => \Illuminate\Auth\Middleware\Authorize::class, 60 'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class, 61 'password.confirm' => \Illuminate\Auth\Middleware\RequirePassword::class, 62 'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class, 63 'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class, 64 'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class, 65 //'cors' => \App\Http\Middleware\Cors::class, 66 ]; 67} 68

api.php

php

1<?php 2 3use Illuminate\Http\Request; 4use Illuminate\Support\Facades\Route; 5 6/* 7|-------------------------------------------------------------------------- 8| API Routes 9|-------------------------------------------------------------------------- 10| 11| Here is where you can register API routes for your application. These 12| routes are loaded by the RouteServiceProvider within a group which 13| is assigned the "api" middleware group. Enjoy building your API! 14| 15*/ 16 17Route::group(['middleware' => ['api']], function () { 18 Route::post('/register', 'UserController@store'); 19 20 //ログイン 21 Route::post('/login', 'AuthController@login'); 22 Route::post('/logout', function (Request $request) { 23 return response()->json(['result' => 'ログアウトしました']); 24 }); 25 26 27 Route::get('/user', 'UserController@index'); 28 29 Route::get('/room', 'RoomController@index'); 30 Route::get('/room/{id}', 'RoomController@show'); 31 Route::post('/room', 'RoomController@store'); 32 Route::put('/room/{id}', 'RoomController@update'); 33});

APIリクエストの実験用のJS

javascript

1async function getRoomInfo(url = '') { 2 let headers = { 'Content-Type': 'application/json', token: 'W3F9gkQpgaRjNairZdToCugR4KtydOLmzVQfbOwqFiuoRpwqAY1RSflIAMRM' }; 3 try { 4 const response = await (await fetch(url, { mode: 'no-cors', headers: headers })).text(); 5 } catch (error) { 6 console.error('Error:', error) 7 } 8} 9function setRoomInfo() { 10 getRoomInfo('http://localhost:8085/api/room') 11 /*.then(res => res.json()) 12 .then((json)=>{ 13 this.setState({roomInfo:json}) 14 }) 15 .catch(error => { 16 console.error('Error:', error) 17 }) 18 */ 19} 20 21window.onload = () => { 22 setRoomInfo(); 23 const url = 'http://127.0.0.1:8085/api/room'; 24 let headers = { 'Content-Type': 'application/json', token: 'W3F9gkQpgaRjNairZdToCugR4KtydOLmzVQfbOwqFiuoRpwqAY1RSflIAMRM' }; 25 fetch('http://localhost:8085/api/room', { headers: headers }) 26 .then((res) => { 27 28 console.log(res); 29 res.json(); 30 }) 31 .then((json) => { 32 console.log(json); 33 }) 34 .catch(error => { 35 console.error('Error:', error); 36 }); 37 38 39 axios.defaults.headers.common = { 40 token: 'W3F9gkQpgaRjNairZdToCugR4KtydOLmzVQfbOwqFiuoRpwqAY1RSflIAMRM' 41 }; 42 axios.get(url) 43 .then(function (response) { 44 45 console.log(response); 46 }) 47 .catch(function (error) { 48 console.log(error); 49 console.log(error.response); 50 }); 51};

APIリクエストの実験用のJSの結果
localhostと127.0.0.1:8085が混ざっていますが、こちらは両方とも試した後です。
そのため、axiosとfetch両方ともlocalhostと127.0.0.1:8085で試しましたが、画像のエラーが表示されました。
また、Laravel内でも、APIリクエストの実験用のJSと同じようなものを作り、同じポートで実行しましたが、そちらも画像のエラーが表示されました。
イメージ説明

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2021/02/01 02:03

localhostと127.0.0.1と混ざってますね、その原因については把握してらっしゃいますか?
naochan1214

2021/02/01 02:07 編集

回答ありがとうございます。 localhostと127.0.0.1両方とも試した後のものになります。 しかし、両方とも画像のようなエラーが表示されます。
hentaiman

2021/02/01 02:27

提示のgithubリポジトリはあなたのものですか?
naochan1214

2021/02/01 02:31

はい、私のリポジトリになります。 権利や規約的に問題でもありましたでしょうか?
hentaiman

2021/02/01 02:34

いえ、そういう訳ではないです リポジトリ見てみたので、本人のモノなら回答しようかなって思って聞きました
naochan1214

2021/02/01 02:36

そうでしたか、分かりました。
guest

回答2

0

ベストアンサー

とりあえずnginxの下記が動作しないルールです。

if ($request_method = 'OPTIONS') { add_header Access-Control-Allow-Origin '*'; add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE'; add_header Access-Control-Allow-Headers 'Origin, Authorization, Accept, Content-Type'; add_header Access-Control-Max-Age 3600; add_header Content-Type 'text/plain charset=UTF-8'; add_header Content-Length 0; return 204; }

これだとmethod = OPTIONSの場合のみ、GET, POST, PUT, DELETEを許可するという意味になります。
return以外はifの上に移動しましょう。
それからAllow-MethodにOPTIONSを追加しましょう。ライブラリは要りません。

ただし、使用しているライブラリが本当にCORSに対応しているのならnginxのCORS関連の設定は全消しでちゃんと説明見ながらレスポンスヘッダーを正しく設定する事で対応出来るでしょう。
※ライブラリの事は全く知り無いので、ライブラリに問題無い事が前提です。

おまけ

docker-composeのnginx以外のports設定が無駄です。消しましょう。
mysqlに限ってはホストOSから直接接続したいのなら残しても良いですが。

投稿2021/02/01 02:59

hentaiman

総合スコア6389

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

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

naochan1214

2021/02/01 03:22

ありがとうございます!! nginxでCORSの設定をしていたことが原因でした。
guest

0

とりあえず呼び出し元と同じポートを利用して
スタティックなテキストデータを呼んでデバッグするところからでしょう
あとダイレクトに当該URLをブラウザに入力して呼び出せるかの確認です

投稿2021/02/01 02:11

編集2021/02/01 02:12
yambejp

総合スコア114585

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

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

naochan1214

2021/02/01 02:24 編集

一様、直接ブラウザやPostmanでのアクセスでは、正常にレスポンスが返ってきました。 また、Laravel内でも、APIリクエストの実験用のJSと同じようなものを作り、同じポートで入りましたが、 そちらも画像のエラーが表示されました
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問