66799


フロントエンド(Nuxt)からaxiosでAPI(Rails)にアクセスする際、CORSエラーになってしまい、RailsのCORSをどのように設定すれば良いか悩んでいます。

下記のソースコードの通り、いくつか試してみたのですが、同様のCORSエラーでした。  
こういった場合はやはり、コンテナのIPを固定すべきでしょうか？  
ご教授いただけると助かります。

ブラウザ エラー

[code]

    Access to XMLHttpRequest at 'http://127.0.0.1:5000/api/xxx' from origin 'http://localhost:7000' 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.
    
[/code]

# ソースコード

api_rails/config/initializers/cors.rb

[code]

    Rails.application.config.middleware.insert_before 0, Rack::Cors do
      allow do
        origins 'Nuxtのコンテナ名', 'localhost', 'localhost:5000', '127.0.0.1', '0.0.0.0', '0.0.0.0:5000'
    
        resource '*',
          headers: :any,
          methods: [:get, :post, :put, :patch, :delete, :options, :head]
      end
    end
    
[/code]

nuxt.conf.js

[code]

    axios: {
        baseURL: 'http://api_rails:5000/api/',
        browserBaseURL: 'http://127.0.0.1:5000/api/',
    }
    
[/code]

# 環境

Railsコンテナ外部ポート 5000  
Railsコンテナ内部ポート 3000

Nuxtコンテナ外部ポート 7000  
Nuxtコンテナ内部ポート 3000

サーバホストはどちらも0.0.0.0で起動


CC BY-SA 4.0
2020-05-19T13:48:24.177
66780
2021-04-04T00:53:59.680
2021-04-04T00:53:59.680
32986
25223
question
ruby-on-rails docker nuxt.js axios
Docker RailsのCORS設定について


Cross Originはscheme, host, portのいずれか一つでも異なる場合にその扱いになります。  
サーバー側はhttp://localhost:7000に対して、クライアント側(ブラウザ)はhttp://localhost:5000です。  
schemeはhttp、hostはlocalhost、portは5000と7000でportが異なることからCross
Originの扱いになります。これを許可するにはrails側でlocalhost:5000のoriginからの通信を許可する必要があります。これに関してはrailsのoriginsに指定されているので問題ありません。これ以外の記述は不要でしょう。

今回問題になってるのはaxiosのbase
URLです。dockerのホストからdockerにアクセスするとき、docker内部の名前解決は利用できないので、ブラウザから見たrails側のhostはlocalhost:5000を指定する必要があります。次のような設定になると思います。

[code]

    axios: {
      baseURL: 'http://localhost:5000/api/',
      browserBaseURL: 'http://localhost:5000/api/',
    }
    
[/code]


CC BY-SA 4.0
2020-05-20T03:43:39.167
66799
2020-05-23T10:22:04.960
2020-05-23T10:22:04.960
7997
7997
66780
answer