リクエストをLaravelで受け取れない（CORSエラー）
解決したいこと
フロント側から受け取ったオブジェクトデータをLaravel側のpublicディレクトリの中にあるJsonファイルに書き込みたいと思ってます。
しかしCORSエラーに悩まされております。Laravel10を使用しているのでミドルウェアの追加はいらないというとこを知りましたが。 ほかの方法及び原因が見当たりません。
発生している問題・エラー
Access to XMLHttpRequest at 'http://localhost/api/players' from origin 'http://localhost:3000' 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.
または、問題・エラーが起きている画像をここにドラッグアンドドロップ
フロント側(React)
const headers = {"Content-Type": "application/json","Access-Control-Allow-Origin": "http://localhost:3000"};
const instance = axios.create({
baseURL : 'http://localhost',
headers:headers
});
try {
await instance.post('http://localhost:/api/players ',reobj); //reobjというオブジェクトデータ
} catch (error) {
console.log(error)
}
バックエンド側(Laravel)のコントローラー
class PlayersController extends Controller
{
/**
* プレイヤー一覧を表示する
*
* @return view
*/
public function showPlayers()
{
}
public function savePlayers(Request $request)
{
$playersData = $request->all();
$jsonData = json_encode($playersData);
file_put_contents('players_list.json', $jsonData); //今回行いたいLaravel側の処理
}
}
api.phpでルーティングしましたのルーティング
Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
return $request->user();
});
Route::post('/players', [PlayersController::class, 'savePlayers']); //今回のコントローラー
cors.phpは以下の設定です。
return [
/*
|--------------------------------------------------------------------------
| Cross-Origin Resource Sharing (CORS) Configuration
|--------------------------------------------------------------------------
|
| Here you may configure your settings for cross-origin resource sharing
| or "CORS". This determines what cross-origin operations may execute
| in web browsers. You are free to adjust these settings as needed.
|
| To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
|
*/
'paths' => ['api/*', 'sanctum/csrf-cookie', 'players*'],
'allowed_methods' => ['*'],
'allowed_origins' => ['http://localhost:3000'],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => false,
];
ルートの定義は仕方も下記のページを見て行いました。
私的にはCORS対策として不備があるようには見えないのですがエラーが一向に改選されず
悩んでおります。上記の提示しているところでもし不備があれば教えていただけますでしょうか？
よろしくお願いいたします。
0 likes
