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`)
target
をhttp://127.0.0.1:3002
にしてみてください。(だめな気はしますが) ところで、Safari特有の〜と質問に記載されていますが、他のブラウザ(PC上でChromeなど)では大丈夫だったのですか?host.docker.internal
が推奨されているようです。RailsもDockerコンテナとして実行しているのであればホストを経由せずにそのコンテナ名を指定するのもありですね。