70636


API側：Rails（ポート番号3002）  
Client側：Nuxt（ポート番号7001）  
で開発しています。

iOSのSafariから、`192.168.x.xxx:7001`でアクセスすると、NuxtからRails間の接続でCORSエラーとなってしまい、正常に接続ができない状況です。

[code]

    XMLHttpRequest cannot load http://localhost:3002/api/v1/blogs/index due to access control checks
    
[/code]

RailsのCORSのorigin設定で`localhost:3002`の許可やNuxtのproxy設定を行ってみたのですが、同様のエラーになってしまい、  
Safari特有の問題なのか、明確な原因がわからず、解決策をご教授いただけると助かります。  
ちなみに、`http://localhost:3002/api/v1/blogs/index`に直接アクセスすると問題なく取得できます。

# 追記

下記の`nuxt.config.js`のソースコードにある、方法1では、Nuxtのターミナルで以下のエラーが表示されます。

[code]

    ERROR  [HPM] Error occurred while trying to proxy request /api/v1/contacts/index from localhost:7001 to http://192.168.2.164:3002 (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors)
    
[/code]

chromeのNetworkデバッグをみると、`http://localhost:7001/__webpack_hmr/client`へのリクエストされたまま、永遠と結果が返って来ない状況になります。  
その影響で、`http://localhost:7001/api/v1/blogs/index`へのリクエストがpendingとなり、しばらくすると`(failed)net::ERR_EMPTY_RESPONSE`となります。

# 試したこと

## RailsのCORS設定

config/initializers/cors.rb

[code]

    Rails.application.config.middleware.insert_before 0, Rack::Cors do
      allow do
        origins 'localhost:7001', '192.168.x.xxx:7001', 'localhost:3002'
    
        resource '*',
          headers: :any,
          methods: [:get, :post, :put, :patch, :delete, :options, :head],
          credentials: true
      end
    end
    
[/code]

## Nuxtのproxy設定

nuxt.config.js

[code]

    // 方法1
    axios: {
        proxy: true
      },
      proxy: {
        '/api': {
          target: 'http://192.168.x.xxx:3002',
          // 以下のいずれもやってみましたが同様のエラーに...
          // target: 'http://192.168.x.xxx:3002',
          // target: 'http://localhost:3002',
        }
      },
    
    // 方法2
    // http://localhost:3002でアクセスされてしまう
    axios: {
        baseURL: 'http://localhost:3002',
        browserBaseURL: 'http://localhost:3002',
        proxy: true
      },
    proxy: {
        '/api': {
          target: 'http://192.168.x.xxx:3002',
        }
      },
    
[/code]

NuxtのストアからRailsにアクセスしているコード

[code]

    const res = await this.$axios.get(`/api/v1/blogs/index`)
    
[/code]


CC BY-SA 4.0
2020-09-21T10:06:11.097
70586
2021-04-04T00:55:29.690
2021-04-04T00:55:29.690
32986
25223
question
ruby-on-rails nuxt.js axios cors
Nuxt Safariでアクセスすると、CORSエラーになってしまう

[code]

    axios: {
        proxy: true
      },
      proxy: {
        '/api': {
          target: 'http://docker.for.mac.localhost:3002',
        }
    
[/code]

Docker環境だったため、とすることで正常に接続されました。  
hinaloeさん、ありがとうございました。


CC BY-SA 4.0
2020-09-23T13:56:08.510
70636
2020-09-23T13:56:08.510
25223
70586
answer