has been blocked by CORS 정책 처리

이벤트

Rails+React(Type script)를 통해 응용 프로그램을 만들 때 API 호출 부분에 다음과 같은 오류가 발생하여 처리됩니다.

Access to XMLHttpRequest at 'http://localhost:3000/api/v1/posts' from origin 'http://localhost:3001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

컨디션

백엔드: Rails

사냥꾼자리: http://localhost:3000

프런트: React(Type Script)

사냥꾼자리: http://localhost:3001

까닭

백엔드와 전방의 사냥꾼자리가 다르고 백엔드 측은 서로 다른 사냥꾼자리로부터의 접속(CIOS)을 허용하지 않는다.
오리온과 CIOS의 설명은 볼 수 있다https://qiita.com/att55/items/2154a8aad8bf1409db2b.

처리 방법

서버는 프론트 데스크에서 접근할 수 있습니다 http://localhost:3001.
물론 백엔드와 프런트엔드 오리온을 통일(Rails도 프런트엔드 만들기)하면 이런 문제가 발생하지 않지만, 이번처럼 다른 프레임으로 제작하면 오리온이 분리되기 때문에 서버 측에서 특정 오리온에 대한 접근을 허용해야 한다.

방법

취소

Gemfile 내의 gem 'rack-cors' 주석

bundle install

config/initializers/cors.rb의 아래 부분에서 허용할 오리지널을 설명합니다.

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    ## 今回だと許可したいオリジンは http://localhost:3001 なのでこれを記述する
    origins 'http://localhost:3001'

    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

bin/rails s

cors.rb 부하에 기술되어 기동할 때 읽힌다.따라서 서버 시작 시 덮어쓰는 경우 덮어쓴 후 다시 시작합니다.

참고 문헌

https://qiita.com/att55/items/2154a8aad8bf1409db2b

https://blog.cloud-acct.com/posts/u-rails-rackcors/