Nuxt.jsで複数サーバにAPIの問い合わせをローカルで行いたい

Question

前提・実現したいこと

Nuxt.jsでAxiosを使用しAPI通信を行っています。
今回、WordpressのAPIと、バックエンドをGoで作成したマイページのAPIを同時に叩きたいです。

発生している問題・エラーメッセージ

それぞれのバックエンドのlocalhostのオリジンが違うため、
両方のCORSエラーに対応することができない状況です。
（Go：3001ポート、WP：8080ポート）
どうしてもaxiosのbaseURLに指定している localhost:3001 へAPI通信をしに行ってしまいます。
もし同じ状況で解決された方がいらっしゃれば、お知恵お借りしたいです。
（APIは片方だけ叩くのは問題ありません。）

CORSエラーは一般的なCORSエラーと思います。

Access to XMLHttpRequest at 'http://localhost:8080/wp-json/wp/v2/posts/' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

試したこと

nuxt.config.jsに下記記載してみましたが、ダメそうでした。
proxyの理解が正しくないのかもしれませんが…。

  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],
  axios: {
    proxy: true
  },
  proxy: {
    '/api/': 'http://localhost:3001',
    '/wp-json/': 'http://localhost:8080'
  },

別途、 plugins/axios.js に下記コードを記載してあります。
下記の baseURL の記載をなくしてしまうと、Node(Nuxt)が動いている 3000ポートへアクセスします。

axios.defaults.baseURL = 'http://localhost:3001'
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
axios.defaults.headers['Access-Control-Allow-Origin'] = '*'

APIを叩く際にフルパスで下記のようにすると、axiosのbaseURLで指定していないほうがCORSエラーとなります。

let { postData } = await axios.get('http://localhost:8080/wp-json/wp/v2/posts/')
let { data } = await axios.get('http://localhost:3001/api/v1/favorites')

Comments

[yukapome789]

文章から読み取れなかったので確認なのですが、WordpressのAPIと、Goで作成したマイページのAPI、片方だけ叩く場合は問題なくて、両方叩こうとするとだめって話ですよね？（そもそもaxios使えてるのかを確認したい）

[shuheq]

コメントありがとうございます。その通りです。
片方を叩く場合は問題ありません。

[yukapome789]

やったことないので試してみてくださいとしか言えないのですが、
・nuxt.config.jsのmodulesに何指定してるか見たいです。可能であれば（隠したいところは隠して）nuxt.config.js全体を貼ってください。
・もしmodulesに '@nuxtjs/proxy' が入ってなかったら追加してみてください。
・baseURLは消したほうが良さそうです。（下記のWARNINGより）
https://axios.nuxtjs.org/options.html#baseurl

[shuheq]

modulesは下記になります。
今回は小規模からスモールスタートしようとしてるサービスなので、現状ではまだ、configではほとんど何も行っていないです。

modules: [
'@nuxtjs/axios',
'@nuxtjs/proxy'
],

npm でのインストールも完了しており、使用できないといったエラーは出ません。

> ・baseURLは消したほうが良さそうです。（下記のWARNINGより）
ありがとうございます！
こちらは消してみて影響がないかなども見ておりますが、消してしまうと、どのAPIもNuxt.js(nodeが3000ポートで動いてます)のサーバへ問い合わせしてしまいます。

[yukapome789]

情報追加ありがとうございます。実際にaxiosを使っているところが記載されていませんが、例えばAPI叩く時にフルパスで（つまりhttp://localhost:3001 や http://localhost:8080で）書くと両方叩けますか？

[yukapome789]

それとは別に、下記のようにproxyを定義するとどうですか？
https://axios.nuxtjs.org/options.html#proxy

proxy: {
'/api/': { target: 'http://api.example.com', pathRewrite: {'^/api/': ''} }
}

[yukapome789]

矢継ぎに申し訳ないのですが、あとCORSのエラーが出ている、と仰っているエラーの内容も貼ってください。

[shuheq]

コメントありがとうございます。
APIを叩く際にフルパスで下記のようにすると、axiosのbaseURLで指定していないほうがCORSエラーとなります。（baseURLを指定していないと、nodeの3000ポートとの通信になり、CORSエラーが出るという旨のエラーが出てしまいます。）
let { postData } = await axios.get('http://localhost:8080/wp-json/wp/v2/posts/')
let { data } = await axios.get('http://localhost:3001/api/v1/favorites')

[shuheq]

CORSエラーはこちらです。
Access to XMLHttpRequest at 'http://localhost:8080/wp-json/wp/v2/posts/' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

[yukapome789]

ありがとうございます。情報追加いただいたところ申し訳ないのですが、自分は力になれなさそうです。何かわかったことがあればコメントしますね。

[shuheq]

とんでもないです。
色々と情報を追記したことにより、内容に厚みが出たと思います。
何か判明したことがあれば、コメントいただけると幸いです！

[hoshi-takanori]

接続先ごとに axios インスタンスを作る必要があるのでは。
https://stackoverflow.com/a/57816828/1019868

[shuheq]

コメントありがとうございます。
確かにその通りだと思います。週末にその方向で修正してみようと思っています。
問題が解決したら自己解決につけます。ありがとうございます！

Answer 1

下記のようなpluginsファイルを作り解決しました。
指摘いただいたように、baseURL毎に各インスタンスを作成して回避しています。

import Vue from 'vue'
import axios from 'axios'

const goaxiosConfig = {
  baseURL: 'http://localhost:3001/api/v1',
  timeout: 30000
}
Vue.prototype.$goaxios = axios.create(goaxiosConfig)

const wpaxiosConfig = {
  baseURL: 'http://localhost:8080/wp-json/wp/v2',
  timeout: 30000
}
Vue.prototype.$wpaxios = axios.create(wpaxiosConfig)

呼び出す際は下記のように使います。

let postData = this.$wpaxios.get('/posts')
 → http://localhost:8080/wp-json/wp/v2/posts が呼び出される

今回は http://localhost:3001/ のようにベタ書きになってしまっているので、
環境変数で管理するなどにして、デプロイ時にも耐えれるようにすると良いと思います。