CORS

CORSは、ブラウザ環境でスクリプトを使用してトリガーされる悪意のあるリクエストからアプリケーションを保護するのに役立ちます。

たとえば、AJAXやfetchリクエストが異なるドメインからサーバーに送信された場合、ブラウザはCORSエラーでそのリクエストをブロックし、リクエストを許可する必要があると思う場合にCORSポリシーを実装することを期待します。

AdonisJSでは、@adonisjs/corsパッケージを使用してCORSポリシーを実装できます。このパッケージには、受信リクエストをインターセプトし、正しいCORSヘッダーで応答するHTTPミドルウェアが含まれています。

インストール

次のコマンドを使用してパッケージをインストールおよび設定します：

node ace add @adonisjs/cors

検出されたパッケージマネージャを使用して@adonisjs/corsパッケージをインストールします。

adonisrc.tsファイル内に次のサービスプロバイダーを登録します。

{
  providers: [
    // ...other providers
    () => import('@adonisjs/cors/cors_provider')
  ]
}

config/cors.tsファイルを作成します。このファイルにはCORSの設定が含まれています。
start/kernel.tsファイル内に次のミドルウェアを登録します。
```
server.use([
  () => import('@adonisjs/cors/cors_middleware')
])
```

設定

CORSミドルウェアの設定は、config/cors.tsファイルに保存されます。

import { defineConfig } from '@adonisjs/cors'

const corsConfig = defineConfig({
  enabled: true,
  origin: true,
  methods: ['GET', 'HEAD', 'POST', 'PUT', 'DELETE'],
  headers: true,
  exposeHeaders: [],
  credentials: true,
  maxAge: 90,
})

export default corsConfig

enabled

ミドルウェアを一時的にオンまたはオフにすることなく、ミドルウェアスタックから削除せずに、一時的にオンまたはオフにします。

origin

originプロパティは、Access-Control-Allow-Originヘッダーの値を制御します。

現在のオリジンのリクエストを許可するには、値をtrueに設定します。現在のオリジンのリクエストを許可しない場合は、falseに設定します。

{
  origin: true
}

ハードコードされたオリジンのリストを指定して、ドメイン名の配列を許可することもできます。

{
  origin: ['adonisjs.com']
}

すべてのオリジンを許可するにはワイルドカード式*を使用します。ワイルドカード式の動作方法については、MDNのドキュメントを参照してください。

credentialsプロパティがtrueに設定されている場合、ワイルドカード式はboolean (true)のように動作します。

{
  origin: '*'
}

HTTPリクエスト中にoriginの値を計算するために、関数を使用することもできます。例：

{
  origin: (requestOrigin, ctx) => {
    return true
  }
}

methods

methodsプロパティは、プリフライトリクエスト中に許可するメソッドを制御します。Access-Control-Request-Methodヘッダーの値は、許可されたメソッドと照合されます。

{
  methods: ['GET', 'HEAD', 'POST', 'PUT', 'DELETE']
}

headers

headersプロパティは、プリフライトリクエスト中に許可するリクエストヘッダーを制御します。Access-Control-Request-Headersヘッダーの値は、headersプロパティと照合されます。

値をtrueに設定すると、すべてのヘッダーが許可されます。値をfalseに設定すると、すべてのヘッダーが許可されません。

{
  headers: true
}

文字列の配列としてヘッダーを許可するには、ヘッダーを指定します。

{
  headers: [
    'Content-Type',
    'Accept',
    'Cookie'
  ]
}

HTTPリクエスト中にheadersの設定値を関数を使用して計算することもできます。例：

{
  headers: (requestHeaders, ctx) => {
    return true
  }
}

exposeHeaders

exposeHeadersプロパティは、プリフライトリクエスト中にAccess-Control-Expose-Headersヘッダーを介して公開するヘッダーを制御します。

{
  exposeHeaders: [
    'cache-control',
    'content-language',
    'content-type',
    'expires',
    'last-modified',
    'pragma',
  ]
}

credentials

credentialsプロパティは、プリフライトリクエスト中にAccess-Control-Allow-Credentialsヘッダーを設定するかどうかを制御します。

{
  credentials: true
}

maxAge

maxAgeプロパティは、Access-Control-Max-Ageレスポンスヘッダーを制御します。値は秒単位です。

値をnullに設定すると、ヘッダーは設定されません。
-1に設定すると、ヘッダーは設定されますが、キャッシュは無効になります。

{
  maxAge: 90
}

CORSエラーのデバッグ

CORSの問題をデバッグすることは難しい経験です。ただし、CORSのルールを理解し、レスポンスヘッダーをデバッグしてすべてが正しく設定されていることを確認する以外にショートカットはありません。

以下は、CORSの動作をよりよく理解するために読むことができる記事へのリンクです。

CORS

インストール

設定

CORSエラーのデバッグ

On this page