Reux Redux <아니요 '요청한 리소스에 Access Control-Allow-Origin 헤더가 있습니다. Origin 'null'은 허용되지 않습니다. access>

Question

React + Redux + RoR을 사용하고 있습니다. 나는 사회적 로그인을해야한다. 클라이언트 측을 위해 나는 davezuko/react-redux-starter-kit을 사용하며 localhost : 3000에 있습니다. 내 서버 - localhost : 5000. 클라이언트에서 서버로의 모든 요청은 문제가 없습니다 (PUT, GET, POST). 나는 트위터 사용하여 로그인을 시도 할 때 (로컬 호스트, 서버에서의 일을 : 5000/인증/트위터 - 트위터에서 PARAMS와 DB에 새로운 사용자를 생성) 나는 오류가 : 클라이언트 측에

Failed to load https://api.twitter.com/oauth/authenticate?oauth_token=xxxxx: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. 

이 같은 전화를 :

export const requestTest = async() => { 
return axios.get('http://localhost:5000/auth/twitter', {}).then(function (response) { 
     console.log('cors') 
    console.log(response) 
    return response.data 
}) 

}};

는

내가 그것을 어떻게 를 해결할 수 있습니까?

Answer 1

React 서버의 출처가 Rails 애플리케이션 서버의 출처 (포트 번호 만)와 다른 경우 Rails는 요청이 교차 출처라고 생각합니다.

레일스가 이러한 요청을 수신하면 CORS 정책이 설정되어 있지 않으면 거부합니다.

1) 이 Gemfile에

gem 'rack-cors', require: 'rack/cors' 

을 추가

그렇게하는 가장 쉬운 방법은 rack-cors 보석을 사용하는 (아마도)입니다.

2) bundle install

3) config/application.rb 내부 class Application < Rails::Application에서

# see gem page for more examples 
config.middleware.insert_before 0, Rack::Cors do 
    allow do 
    origins /\Ahttp:\/\/localhost:\d+\z/ 
    resource '*', headers: :any, methods: :any 
    end 
end 

를 추가합니다.

4) 다시 시작 레일.