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

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

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


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




今すぐ案件紹介をご希望の方へ


このブログから登録の多いエージェントは下記の3つです★

(リンクをクリックすると公式サイトに飛びます)

【ダントツの1番人気】フォスターフリーランス【案件保有数5000件以上。業界25年の超老舗】

【僅差で2位】エミリーエンジニア【4人に1人が初めてのフリーランス】

【惜しくも3位】レバテックフリーランス【業界最大手。素早く手厚いフォローで案件参画】




こんにちは、mahです。


このブログでは、

僕が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ヘッダーの違い

f:id:mah666hhh:20210302093726p:plain




Nuxt.jsやVue.js、フロントエンドを学習したい方へ


自分の場合、

React.jsVue.jsTypeScriptはUdemyの下記コースで学習しました。


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

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

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


f:id:mah666hhh:20200815162919p:plain


f:id:mah666hhh:20200815162939p:plain


f:id:mah666hhh:20200815162951p:plain




最後に


下記の表に、

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


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





あわせて読みたい


www.malanka.tech


www.malanka.tech


www.malanka.tech


www.malanka.tech


www.malanka.tech