こんにちは、現役沖縄フリーランスエンジニアのmah（MaLanka）です。
このブログでは、
僕がIT未経験から約1年でフリーランスエンジニアになるまでの過程、
ノウハウなどを書いていきます。
今回は、
- 【Nuxt Vue Rails】axiosのContent-Typeがappliation/jsonにならない
について書いていきます。
【Nuxt Vue Rails】axiosのContent-Typeがappliation/jsonにならない
フロントにNuxt.js(v2.15.2)、
バックエンドにAPIモードのRails(v5.2.4)を使用。
axiosでリクエストを送る際、
Content-Typeがjsonにならず、
htmlリクエストとして送信されていたので備忘録。
解決策
getの場合は、
第二引数にheaders: をキーとして、
指定したいヘッダのオプションを渡せばOK。
this.$axios.get(url, { headers: { "Content-Type": "application/json", "Accept": "application/json" }})
postの場合は、
第三引数にheaders: をキーとして、
指定したいヘッダのオプションを渡せばOK。
this.$axios.post(url, {}, { headers: { "Content-Type": "application/json", "Accept": "application/json" } })
headers:のキー:が抜けていると反映されないので要注意です。
自分が今回ハマったのはこれが原因でした...
// NG headers:がない
this.$axios.get(url, { "Content-Type": "application/json", "Accept": "application/json" })
// OK
this.$axios.get(url, { headers: { "Content-Type": "application/json", "Accept": "application/json" }})
- 参考
GitHub - axios/axios: Promise based HTTP client for the browser and node.js
JavaScript axios Content-Type の設定にはハマる - かもメモ
AcceptとContent-Type HTTPヘッダーの違い
Nuxt.jsやVue.js
、フロントエンドを学習したい方へ
自分の場合、
React.js
、Vue.js、TypeScript
はUdemyの下記コースで学習しました。
✅フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門
