CORS問題についてまとめてみた

CORS ERROR

よく問題になるのは、ローカルで開発している際に

フロントとバックでポートが異なりフロントからバックにAPIを叩きに行ったらcors errorがでる。

CORSって？

基本は同じオリジンからじゃないとアクセスしても情報を受け取れない。

オリジンはプロトコルとポートとドメインのこと。

しかし、APIを外に公開する必要があると、同一オリジンからじゃないとダメなのは問題になる。

そこで異なるオリジンからでもアクセス可能にしようよって話がCORS。

実装方法

CORSを実装するにはリクエストとレスポンス両方のヘッダーにCORSするという了承を載せないといけない。

そのためにフロントではheaderに

const axiosInstance = axios.create({
    baseURL: "http://localhost:8080",
    headers: {
      'Content-Type': 'text/plain',
      "Access-Control-Allow-Origin": "http://localhost:8000",
    },
  })

みたいな感じ。(バックが8080でフロントが8000。8000からのリクエストは許して下さい、みたいな感じでリクエストヘッダに付与。)

バックでもheaderにcorsOKをレスポンスヘッダーに追加する。(ここでは8000からのリクエストにはOKを出せ見たいな感じで、Access-Control-Allow-Originがレスポンスヘッダに付与されて返される)

Cookieなどの資格情報を付与してCORSしたい

フロントは'Access-Control-Allow-Credentials' :'true'

を追加すればOK。

同じようにバックにもレスポンスヘッダにAccess-Control-Allow-Credetials＝trueを付与してあげる設定をしてあげる。

注意はバックでAccess-Control-Allow-Origin,Access-Control-Allow-Headers,Access-Control-Allow-Methodsでワイルドカードが使えなくなる。

シンプルリクエストとそうでないリクエスト

シンプルリクエストになる条件は

• リクエストメソッドが HEAD, GET, POST のどれか
• リクエストヘッダが許可されてるものだけ
• リクエストヘッダの Content-Type は application/x-www-form-urlencoded, multipart/form-data, text/plain のどれか
• リクエストに使うどの XMLHttpRequestUpload オブジェクトにもイベントリスナがついていない
• リクエストに ReadableStream を使っていない

参照:https://developer.mozilla.org/ja/docs/Web/HTTP/CORS#Examples_of_access_control_scenarios

シンプルリクエストの条件を満たさない（Content-Typeがjsonとかmethodがdeleteとか）場合は

プリフライトリクエストとなる。

プリフライトリクエストはCORS確認のためにOPTIONメソッドで送られるリクエスト。

実装方法は

バックのほうでCORSでOPTIONメソッドを許可してあげる必要がある。

レスポンスヘッダーにAccess-Control-Allow-MethodsでOPTIONSメソッドを加えてあげる必要がある。

これでも注意はバックでAccess-Control-Allow-Origin等でワイルドカードが使えなくなる。

参考

コードを交えて詳しく教えてくれます。