![クローバー](https://indent-box.com/wp-content/uploads/2021/05/illust1_04-150x150.png)
access-control-allow-originっていうエラーが出た。。。
RailsをAPIとして利用する場合に、「access-control-allow-origin」というエラーが出てきました。
「access-control-allow-origin」を解消するためには、CORSを設定しないとダメだということで、その設定方法について今回は紹介していきます。
CORSとは?
オリジン間リソース共有 (Cross-Origin Resource Sharing, CORS) は、追加の HTTP ヘッダーを使用して、あるオリジンで動作しているウェブアプリケーションに、異なるオリジンにある選択されたリソースへのアクセス権を与えるようブラウザーに指示するための仕組みです。ウェブアプリケーションは、自分とは異なるオリジン (ドメイン、プロトコル、ポート番号) にあるリソースをリクエストするとき、オリジン間 HTTP リクエストを実行します。
https://developer.mozilla.org/ja/docs/Web/HTTP/CORS
簡単に説明すると、違うリソースから通信を投げたときに対応するかどうかって感じです。
例えば、RailsをAPI、frontをVueに設定しているとします。
お互い違うリソースであるため、通常はVueからRailsにGET通信を投げても「access-control-allow-origin」とエラーが出てしまいます。
しかし、CORS設定を行っておくと、VueからRailsにGET通信を行うときエラーが出ることなく、レスポンスを返すことができるようになるのです。
CORSの設定方法
CORSはRails側で設定します。
gemの導入
便利なgemがあるので、それを使いましょう。
gem 'rack-cors'
cors.rbの設定
gemを入れると自動で、config/initializersにcors.rbというファイルが出来るので、そこにとりあえず以下のコードを貼り付けてみましょう
Rails.application.config.middleware.insert_before 0, Rack::Cors do
allow do
origins "*"
resource "*",
headers: :any,
methods: [:get, :post, :put, :patch, :delete, :options, :head]
end
end
上記のコードはすべてのオリジンからのリクエストを受け付けるという設定です。
特定のオリジンだけ(‘localhost:8080’と’https://www.sample.com’から)にしたいという場合は、以下のように設定してあげましょう。
Rails.application.config.middleware.insert_before 0, Rack::Cors do
allow do
origins 'localhost:8080','https://www.sample.com'
resource "*",
headers: :any,
methods: [:get, :post, :put, :patch, :delete, :options, :head]
end
end
あとは、Dockerを利用している場合はコンテナを起動し直せば適用されるかと思います。
![クローバー](https://indent-box.com/wp-content/uploads/2021/05/illust1_01.png)
これで通信はバッチリだ!
参考サイト
![](https://indent-box.com/wp-content/uploads/cocoon-resources/blog-card-cache/adec6b7fe735d4bf667370b32e75dcc6.png)
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9Q09SUyVFMyU4MSU4QyVFMyU4MiU4OCVFMyU4MSU4RiVFMyU4MiU4RiVFMyU4MSU4QiVFMyU4MiU4OSVFMyU4MSVBQSVFMyU4MSU4NCVFMyU4MSVBRSVFMyU4MSVBNyVFOCVBNyVBMyVFOCVBQSVBQyVFMyU4MSU5NyVFMyU4MSVBNiVFMyU4MSVCRiVFMyU4MSU5RiVFRiVCQyU4NlJhaWxzJTIwQVBJJUUzJTgxJUE3JUUzJTgxJUFFQ09SUyVFOCVBOCVBRCVFNSVBRSU5QSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9Nzg2YWMzZmRiZWQ0ZDgyNjE3NDg3NjU3YzJjOWQyYTM&mark-x=142&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwbXRveW9wZXQmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTNmMWVhZTcwNDA2YzllOGNhNmMwN2UyMzBmODkyMWY0&blend-x=142&blend-y=491&blend-mode=normal&s=093c59317c6859307184dfb2bb2a49fc)
コメント
Thanks for the complete information. You helped me.