スリ飯屋MaLankaのフリーエンジニアな日々

IT実務未経験から約1年、東京でフリーランスのRuby on Railsエンジニアに転職。約2年半、大阪中崎町でスリランカカレーの間借りしてました。フリーランスエンジニアになるためのノウハウ、スリランカの事を発信していきます。

【Nuxt Vue Rails】axiosのContent-Typeがappliation/jsonにならない


【Nuxt Vue Rails】axiosのContent-Typeがappliation/jsonにならない


こんにちは、現役沖縄フリーランスエンジニアの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.jsVue.jsTypeScriptはUdemyの下記コースで学習しました。


フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門

Vue.js + Firebaseで作るシングルページアプリケーション

ハンズオンで学ぶ TypeScript - JavaScript エンジニアのための TypeScript徹底入門







最後に


下記の表に、

フリーランスエンジニア向けの人気エージェントをまとめてみました。


エージェント選びで悩んでいる方は是非参考にしてみてくださいね★


エージェント 詳細 最高単価/月 設立
フリエン(furien) 評判をチェック 180万円/月 2011年
ギークスジョブ 評判をチェック 180万円/月 2011年
フォスターフリーランス 評判をチェック 230万円/月 1996年
pe-bank(pebank) 評判をチェック 200万円/月 1989年
Midworks(ミッドワークス) 評判をチェック 200万円/月 2013年
レバテックフリーランス 評判をチェック 140万円/月 2005年




あわせて読みたい


www.malanka.tech


www.malanka.tech


www.malanka.tech


www.malanka.tech


www.malanka.tech









あなたもフリーランスになってみませんか?