フロント側から、Railsにユーザー情報をフォーム送信すると、こんなエラーが。
Access to XMLHttpRequest at 'http://localhost:3000' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
通常、フロントもバックもドメインは同じURLだが、異なる場合もある。
そんな時発生するのが、クロスドメイン通信を許可しない
というエラー。
そこで、プロキシ設定をNuxt側にもRails側にもすることで、CORSエラーを解消する必要がある。
CORSについては、リンクを参照にしていただければ。
#フロントエンド proxyの設定をする
バック側のローカルサーバは、http://localhost:3000
とする。
$ yarn add @nuxtjs/proxy
nuxt.config.js
modules: [
'@nuxtjs/proxy',
],
proxy: {
'/api': {
target: 'http://localhost:3000',
pathRewrite: {
'^/api': '/api'
}
},
},
#バックエンド CORSの設定をする
フロント側のローカルサーバは、http://localhost:8080
とする。
Gemfile
gem 'rack-cors'
$ bundle install
config/cors.rb
Rails.application.config.middleware.insert_before 0, Rack::Cors do
allow do
# 許可するドメイン
origins 'localhost:8080'
# 許可するヘッダーとメソッド
resource '*',
headers: :any,
methods: [:get, :post, :put, :patch, :delete, :options, :head]
end
end
#番外編 サーバ側で、セッション管理する時
config/application.rb
config.api_only = false
APIモードを使っていたら、trueになっているので、要確認