Electron-Vue+axios+FlaskでHttp通信を行いたい

Question

• リストフロント側：Electron-vue
• API側：Python3, Flask
• APIサーバー：CloudFunction

で実装を行っています。

Flask側で、**request.get_json()**にて、POSTされたデータの値を取得したいのですが
空になります。
※**request.get_data()**だと取得できます。

原因として考えられるのが、フロント側でaxiosでPOSTデータを投げた際、

Content-Type: application/x-www-form-urlencoded

になってしまうことです。

そのため、Vue.jsで

const url = '<url>'
const data = JSON.stringify({user_id: <id>, password: <pass>})
const header = {'Content-Type': 'application/json;charset=UTF-8'}
Axios.post(url, data, header)
　　　　　.then((response) => {
           console.log(response)})

上記のように書いているのですが、
Content-Typeが** application/x-www-form-urlencoded**のままになってしまいます。

application/jsonに直す方法を教えていただきたいです。
よろしくお願いいたします。

Answer 1

プリフライトリクエストが原因でした。

●プリフライリクエストとは...?

別オリジン間で通信する際に、通信する前段階に送信されるテスト通信。

↑これが最初に投げられていました。
その為、投げていると思っていたjsonデータのContent-Typeがapplication/x-www-form-urlencoded
になっていたわけではなく
プリフライトリクエストのContent-Tytpがapplication/x-www-form-urlencodedになっていました。

＜対策＞
PythonのFlaskで実装したサーバー側で、
POSTメソッド以外のものが送信された場合は、送信元を確認してjsonデータの送信を許可する処理にしました。

ありがとうございました。

Answer 2

application/jsonとして送るなら、data をstringにする必要はないと思います。
axiosの仕様には詳しくないですが、dataがstring型なので、気を利かせてContent-Typeをformにしてくれているんじゃないかと

なので素直に以下のように書けば良いのではないでしょうか？

const url = '<url>'
const data = {user_id: <id>, password: <pass>}
const header = {'Content-Type': 'application/json;charset=UTF-8'}
Axios.post(url, data, header)
　　　　　.then((response) => {
           console.log(response)})

Comments

[atsuo6969]

ご回答ありがとうございます。
試しに、JSON.stringify外してみましたが
変わらず「application/x-www-form-urlencoded」になりました...。

[KuwabataK]

axiosのドキュメントを読んでいて気づきましたが、axiosのドキュメントにはpostメソッドの第３引数はconfigのオブジェクトを指定しろって書いてる気がします。なので

Axios.post(url, data, header)ではなく Axios.post(url, data, {headers})

ではどうでしょう？(以下のドキュメントでは、キーの名前も headerではなくheadersを指定しろと書いています)

https://github.com/axios/axios#axiosposturl-data-config-1