Zenn
📝

CORS エラーの解決方法

2022/03/18に公開
AWS
JavaScript
Ruby
S3
CloudFront
tech

こんにちは、株式会社palan の xR事業部 でエンジニアをやっている 笹井 です。

今回は CORS エラーの解決方法について紹介します。

概要

Cross-Origin Resource Sharing (オリジン間のリソース共有)

Aというオリジンで動いているアプリケーションに、
Bというオリジンで動いているサーバーなど(リソース)へのアクセス許可をHTTPリクエストによって可能にする仕組み

ドメインとオリジンはどう違うの？

ドメイン : yahoo.co.jp
オリジン : https://yahoo.co.jp:443

オリジン = プロトコル + ドメイン + ポート番号

なぜ必要なの？

脆弱性の観点から、基本的に別オリジンのリソースにはアクセスできない

提供するオリジンから許可するオリジンを指定することで、
許可されたオリジンからのリソースのアクセスを可能にする

どんな時にエラーが起きるの？

一番多いのは CloudFront でキャッシュしている画像や動画を取得する時

解決方法

インフラ

S3 > 対象のバケット > アクセス許可 > Cross-Origin Resource Sharing (CORS)

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
        ],
        "AllowedOrigins": [
            "{{ ローカル環境ドメイン }}",
            "{{ テスト環境ドメイン }}",
            "{{ 本番環境ドメイン }}"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

CloudFront > ディストリビューション > 対象の ディストリビューション > ビヘイビアを編集

ビューワー

  • 許可された HTTP メソッド:
    GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
    ※OPTIONS が入っていればOK

キャッシュキーとオリジンリクエスト

  • Legacy cache settings:
    • ヘッダー:
      [次のヘッダーを含める]
      • ヘッダーを追加:
        [Origin]
        [Access-Control-Request-Method(カスタムを追加)]
        [Access-Control-Request-Headers(カスタムを追加)]

バックエンド

Rails

config.middleware.insert_before 0, Rack::Cors do
  allow do
    # 許可するドメイン
    origins "{{ ローカル環境ドメイン }}", "{{ テスト環境ドメイン }}", "{{ 本番環境ドメイン }}"
    # 許可するヘッダとメソッドの種類
    resource "*",
      headers: :any,
      methods: [:get, :post, :patch, :delete, :head, :options]
  end
end

フロントエンド

HTML

<img src="{{別オリジンの画像パス}}" crossOrigin="Anonymous" />
<video src="{{別オリジンの動画パス}}" crossOrigin="Anonymous"></video>

JavaScript

image.src = {{別オリジンの画像パス}};
image.crossOrigin = "Anonymous";
video.src = {{別オリジンの動画パス}};
video.crossOrigin = "Anonymous";

参考

https://qiita.com/att55/items/2154a8aad8bf1409db2b
https://aws.amazon.com/jp/premiumsupport/knowledge-center/no-access-control-allow-origin-error/

Discussion