いずみこんな悩みを解決できる記事を書きました！
僕は現役フリーランスエンジニア（歴8年）で、資格は13個保有しています。
「SwaggerでAPIを実行時にCORSエラーが出る場合の対処法が知りたい」とお考えではありませんか？
SwaggerでAPIを実行すると、CORSエラーが発生する場合があります。
いずみSwagger Viewerなどを使っている場合はプリフライトリクエストが実行されるので、OPTIONSメソッドが通らないとエラーになります。
めっちゃハマった…
ということで、本記事ではSwaggerでAPI実行時にCORSエラーが出る場合の対処法を解説します。
いずみすぐ読み終わるので、ぜひ最後まで読んでくださいませ。
【Swagger】API実行時にCORSエラーが出る場合の対処法
基本的にはサーバ側の設定のみで解決します。
いずみ普段Laravelを使うので、今回はPHPのコードで解説しますね。
<?php
namespace App\Http\Middleware;
use Closure;
use Illuminate\Support\Facades\Log;
class Cors {
public function handle($request, Closure $next)
{
$response = $next($request);
$response
->header("Access-Control-Allow-Origin" , $_SERVER['HTTP_ORIGIN'])
->header("Access-Control-Allow-Methods" , ['POST', 'GET', 'DELETE', 'PUT', 'PATCH', 'OPTIONS'])
->header("Access-Control-Allow-Headers" , ['content-type' , 'authorization']);
return $response;
}
}上記のように、サーバ側で「Access-Control-Allow-Origin」を設定すればOKです。
Swaggerはプリフライトリクエストを実行する場合がある
VSCodeのSwagger Viewerなどを使っている場合、API実行時はプリフライトリクエストが実行されます。
つまり、最初にOPTIONメソッドが実行されるので注意しましょう。
いずみ僕はOPTIONSメソッドが実行されるのを知らなくてハマりました…
Swagger Viewerのポートは「18512」
Swagger Viewerのポートは「18512」です。
なので、CORSでドメインを指定している場合はポート番号に注意しましょう。
いずみポートが「8001」だと思っていたら全然違いました…
ファック！！
まとめ
今回は、SwaggerでAPI実行時にCORSエラーが出る場合の対処法について解説しました。
以下が本記事のまとめになります。
いずみ最後までお読みいただき、ありがとうございました！
- クソおすすめ本
いずみ海外のエンジニアがどういった思考で働いているかが理解できます。
海外に行く気はないけど海外エンジニアの動向が気になる雑魚エンジニアにおすすめです（本当におすすめな本しか紹介しないのでご安心を）。
