0

API側:Rails(ポート番号3002)
Client側:Nuxt(ポート番号7001)
で開発しています。

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

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

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

追記

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

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)

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

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

Nuxtのproxy設定

nuxt.config.js

// 方法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',
    }
  },

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

const res = await this.$axios.get(`/api/v1/blogs/index`)
8
  • 1
    以前にも似たような質問がありますが、こちらは試しましたでしょうか? ja.stackoverflow.com/questions/66780
    – himenon
    Commented 2020年9月22日 11:06
  • 1
    方法2で示されている方はリクエストを直接バックエンドに投げるようになるのでCORSエラーが発生するのは当然と言えますが、1の方では示されている内容だけではそうはならない気もします。他にそれらしい(ターゲットを指定しているなど)部分があったりしませんか?あるいはリダイレクトなどは発生していませんか?
    – hinaloe
    Commented 2020年9月22日 13:14
  • 1
    追記部分ですが、認識に誤解があるようです。__webpack_hmr/clientへのリクエストはwebsocketやロングポーリングでHMRを行っているものであり、レスポンスが返って来ていないようにみえるのは正常です
    – hinaloe
    Commented 2020年9月23日 7:02
  • 1
    で、その上に貼られているエラーメッセージが今回の問題というのは合ってそうです。この場合は決してCORSエラーではないですね。開発環境の構成がどうなっているのかわかりませんが、DockerやVMを使うことなく同じ環境にてRailsとnodeが動いているのであればtargethttp://127.0.0.1:3002にしてみてください。(だめな気はしますが) ところで、Safari特有の〜と質問に記載されていますが、他のブラウザ(PC上でChromeなど)では大丈夫だったのですか?
    – hinaloe
    Commented 2020年9月23日 7:09
  • 1
    dockerであること、当然ながらネットワークはdocker固有のものになるので質問には明記するようにしてくださいね!ところで今のホストアドレスの解決は host.docker.internal が推奨されているようです。RailsもDockerコンテナとして実行しているのであればホストを経由せずにそのコンテナ名を指定するのもありですね。
    – hinaloe
    Commented 2020年9月23日 14:05

1 件の回答 1

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

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

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。