Reux Redux <いいえ '要求されたリソースにAccess Control-Allow-Originヘッダーが存在します。 Origin 'null'はアクセスが許可されていません>

Question

私はアプリでReact + Redux + RoRを使用しています。私は社会的なログインをしなければならない。クライアント側では、davezuko/react-redux-starter-kitを使用しています。これはlocalhost：3000にあります。私のサーバー - localhost：5000。クライアントからサーバーへのすべての要求は問題ありません（PUT、GET、POST）。私は、エラーを持っている：クライアント側の

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. 

私のようにこれを呼び出す - ：私は（TwitterからのparamsとDBで新しいユーザーを作成5000 /認証/ Twitterのサーバー上での作業は、localhost）さえずりを使用してログインしようとすると：

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は要求がクロスオリジンであると考えます。

このような要求を受け取った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）再起動のレール。