【Swagger】API実行時にCORSエラーが出る場合の対処法!

いずみこんな悩みを解決できる記事を書きました!
僕は現役フリーランスエンジニア(歴10年)で、資格は13個保有しています。
「SwaggerでAPIを実行時にCORSエラーが出る場合の対処法が知りたい」とお考えではありませんか?
SwaggerでAPIを実行すると、CORSエラーが発生する場合があります。



Swagger Viewerなどを使っている場合はプリフライトリクエストが実行されるので、OPTIONSメソッドが通らないとエラーになります。
めっちゃハマった…
ということで、本記事ではSwaggerでAPI実行時にCORSエラーが出る場合の対処法を解説します。





すぐ読み終わるので、ぜひ最後まで読んでくださいませ。
| 【当サイト】おすすめフリーランスエージェント3選 | |||
|---|---|---|---|
| エージェント | 評価 | ポイント | 公式サイト | 
レバテックフリーランス  | 5.0  | 業界最大級のエージェント。 高単価案件が豊富。  | 公式 | 
Midworks  | 4.8  | 満足度調査で 3年連続3冠を達成。  | 公式 | 
ITプロパートナーズ  | 4.6  | 週2〜3向けの案件が豊富。 | 公式 | 
【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」だと思っていたら全然違いました…
ファック!!
| 【当サイト】おすすめフリーランスエージェント3選 | |||
|---|---|---|---|
| エージェント | 評価 | ポイント | 公式サイト | 
レバテックフリーランス  | 5.0  | 業界最大級のエージェント。 高単価案件が豊富。  | 公式 | 
Midworks  | 4.8  | 満足度調査で 3年連続3冠を達成。  | 公式 | 
ITプロパートナーズ  | 4.6  | 週2〜3向けの案件が豊富。 | 公式 | 
【厳選】フリーランスエンジニアにおすすめなエージェント3選


フリーランスエンジニアになるにはエージェントから案件をもらう必要があります。
僕が実際に利用しているおすすめエージェントを紹介しますね。



エージェントは必ず複数登録してください。
担当者によっては「全然案件紹介してくれない…」みたいなこともあるので…
僕は実際に5つのエージェントを使い回していますよ。
フリーランスを始めるなら「レバテックフリーランス


 」
- 業界最大級の案件数。
 - 業界トップクラスの高単価報酬、低マージン(平均年収862万円)。
 - 案件参画中のフォローの充実。
 
※詳細は「【業界最大手】レバテックフリーランスとは?メリットや利用手順を解説!」を参照。
レバテックフリーランス
![]()
![]()
とにかく案件数が多いので、とりあえず登録しておけば間違いないエージェントです!



僕もはじめてフリーランスの案件を貰ったのはレバテックフリーランス
![]()
![]()
保有している案件数が多いので、業務経験がなくても何かしらの案件は紹介してもらえますよ(僕はJavaの経験3年でも案件を貰えました)。
手厚い保障を重視したいなら「Midworks


 」
- 手厚い保障で正社員並みの安心感。
 - 還元率60%超え&単価公開でクリアな契約。
 - 給与保障制度(審査あり)。
 
Midworks
![]()
![]()
フリーランスを目指しているけど不安な方や保障を重視したい方におすすめです。



僕も何度か案件を紹介してもらいました。
自分のスキルに合った案件を紹介してもらえましたし、電話のやり取りも非常に丁寧でした。
週2〜3日の案件探しなら「ITプロパートナーズ


 」
- IT案件に特化したフリーランスエージェント。
 - 週2〜3日の案件が豊富。
 - リモート案件が多く、直エンドなので単価も高い。
 
※詳細は「【週2・3案件】ITプロパートナーズとは?メリットや利用手順を解説!」を参照。
ITプロパートナーズ
![]()
![]()
週2〜3日から参画できる案件が豊富なので、起業したい人にもおすすめです。



週2〜3日の案件はある程度スキルがないと紹介してもらえない印象です。
とはいえ、週5の案件ももちろんありますし、僕が利用した時は迅速・丁寧に対応していただきました!
まとめ
今回は、SwaggerでAPI実行時にCORSエラーが出る場合の対処法について解説しました。
以下が本記事のまとめになります。



最後までお読みいただき、ありがとうございました!
| 【当サイト】おすすめフリーランスエージェント3選 | |||
|---|---|---|---|
| エージェント | 評価 | ポイント | 公式サイト | 
レバテックフリーランス  | 5.0  | 業界最大級のエージェント。 高単価案件が豊富。  | 公式 | 
Midworks  | 4.8  | 満足度調査で 3年連続3冠を達成。  | 公式 | 
ITプロパートナーズ  | 4.6  | 週2〜3向けの案件が豊富。 | 公式 | 
- クソおすすめ本
 



海外のエンジニアがどういった思考で働いているかが理解できます。
海外に行く気はないけど海外エンジニアの動向が気になる雑魚エンジニアにおすすめです(本当におすすめな本しか紹介しないのでご安心を)。








