Rails6에서 api를 작성할 때 cors 설정에서 망설임에 대해

이 기사에서 쓰기

아래와 같은 어플리케이션을 만들려고 했을 때에, CORS의 설정으로 프로덕션 반영 후에 에러가 발생해 버렸으므로, 같은 실수를 하지 않도록 정보를 제대로 정리해 둔다.

결론

firebase에서 호스팅 된 nuxt 응용 프로그램의 URL이 https://xxxx.web.app이면,

config/environments/production.rb

Rails.application.configure do
  # 中略
  config.hosts << 'xxxx.web.app'
end

config/initializer/cors.rb

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    if Rails.env.production?
      origins 'https://xxxx.web.app'
    else
      origins 'http://localhost:3000'
    end
    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

무슨 일이 있었는지

Access to XMLHttpRequest at 'API側のurl' from origin 'アプリ側のurl' 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.

api에 요청이 오류가 발생합니다.

잘 안 갔을 때의 상황

Ruby: 2.7.1
Rails: 6.0.3.3
rack-cors: 1.1.1

rack-cors 설정

config/initializer/cors.rb

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    if Rails.env.production?
      origins 'https://xxxx.web.app/'
    else
      origins 'http://localhost:3000'
    end
    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

config/environments/production.rb

Rails 가이드

config/environments/production.rb

Rails.application.configure do
  # 中略
  config.hosts << 'https://xxxx.web.app'
end

왜? ? ? 틀리지 않아야합니다. . .
되었지만 firebaseHosting URL: https://xxxx.web.app 라고 하는 기술을 재검토하고 있으면 마지막 / 가 없는 것은! ? ? ? ? 라고 깨닫는다.

config/initializer/cors.rb

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    if Rails.env.production?
      origins 'https://xxxx.web.app' # 最後の/を削除する
    else
      origins 'http://localhost:3000'
    end
    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

Access to XMLHttpRequest at 'API側のurl' from origin 'アプリ側のurl' 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.

그러면 cors 오류가 사라졌습니다.

전투는 아직 끝나지 않았다.

다음은 api가 status403으로 돌아왔다.

config/environments/production.rb

config.hosts << 'xxxx.web.app'

「이야!」라고 response로 친절하게 가르쳐 주었습니다. . . 고마워,