前提・実現したいこと
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の理解が正しくないのかもしれませんが…。
js
1 modules: [ 2 '@nuxtjs/axios', 3 '@nuxtjs/proxy' 4 ], 5 axios: { 6 proxy: true 7 }, 8 proxy: { 9 '/api/': 'http://localhost:3001', 10 '/wp-json/': 'http://localhost:8080' 11 },
別途、 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')
![guest](/img/icon/icnUserSample.jpg)
回答1件
あなたの回答
tips
プレビュー