こんにちは、現役沖縄フリーランスエンジニアの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 アプリケーション開発入門
最後に
下記の表に、
フリーランスエンジニア向けの人気エージェントをまとめてみました。
エージェント選びで悩んでいる方は是非参考にしてみてくださいね★
| エージェント | 詳細 | 最高単価/月 | 設立 |
|---|---|---|---|
|
|
評判をチェック | 180万円/月 | 2011年 |
ギークスジョブ
|
評判をチェック
|
180万円/月 | 2011年 |
フォスターフリーランス
|
評判をチェック | 230万円/月 | 1996年 |
| pe-bank(pebank) | 評判をチェック | 200万円/月 | 1989年 |
|
Midworks(ミッドワークス) |
評判をチェック | 200万円/月 | 2013年 |
|
|
評判をチェック | 140万円/月 | 2005年 |
あわせて読みたい
