61526


サーバサイドにFlask、フロントエンドにvue.jsを利用しています。

axiosを使って、データをサーバサイドに送りたいのですが、jsonをリスト型で送るのがうまくいっていません。ご教授頂けますでしょうか。

**バージョン**  
Python 3.8  
Vue 2.6.10

* * *

**vue.js**

[code]

    axios.get('/testApi', {params:
        {
            jsonList: qs.stringify([
                {id:1, name: 'hoge1'},
                {id:2, name: 'hoge2'}
            ]
        )}})
    
[/code]

**Python**

[code]

    def get(self):
        # クライアントからの引数を受け取る
        parser = reqparse.RequestParser()
    
        # jsonListという名前の引数を受け取る
        parser.add_argument('jsonList')
    
        # dictionary形に変換
        args = dict(self.parser.parse_args())
    
        # 変換結果をコンソールに表示
        print(args['jsonList'])  # ①
    
        # parse.parse_qsで
        parsed1 = parse.parse_qs(args['jsonList'])
    
        print(parsed1)  # ②
    
        parsed2 = parse.parse_qsl(args['jsonList'])
    
        print(parsed2)  # ③
    
[/code]

**①のprintの結果**

[code]

    0%5Bid%5D=1&0%5Bname%5D=hoge1&1%5Bid%5D=1&1%5Bname%5D=hoge2
    
[/code]

**②のprintの結果**

[code]

    {'0[id]': ['1'], '0[name]': ['hoge1'], '1[id]': ['1'], '1[name]': ['hoge2']}
    
[/code]

**③のprintの結果**

[code]

    [('0[id]', '1'), ('0[name]', 'hoge1'), ('1[id]', '2'), ('1[name]', 'hoge2')]
    
[/code]

通常のjson やlist の場合、parse.parse_qs・parse.parse_qslを利用するとうまく分解でき、  
それぞれ、pythonのdictionaryやlistに置き換えられますが、  
jsonのlistの場合、pythonでjsonのlistを整形できずに試行錯誤しております。

最終的には、pythonでも下記の形で処理したいのですが、どなたがお知恵をお貸しいただけますでしょうか。

[code]

    [{id:1, name: 'hoge1'},{id:2, name: 'hoge2'}]
    
[/code]


CC BY-SA 4.0
2019-12-18T00:03:54.657
61525
2021-04-04T00:51:27.810
2021-04-04T00:51:27.810
32986
30948
question
python vue.js flask axios
Flaskにaxiosでjsonのlistを送る方法


[axiosのパラメータ指定方法まとめ](https://qiita.com/taroc/items/f22f7dd5d6d5443c72a4) とか
[axiosの使い方まとめ (GET/POST/例外処理)](https://www.sukerou.com/2019/05/axios.html)
を見ると、`params:`を付けるのではなく、直接jsonを指定すれば良いのでは？

そして受ける方も
[get_json()](https://flask.palletsprojects.com/en/1.1.x/api/#flask.Request.get_json)
を使うとか。  
[HTTPリクエストからJSONを受信する](https://riptutorial.com/ja/flask/example/5832/http%E3%83%AA%E3%82%AF%E3%82%A8%E3%82%B9%E3%83%88%E3%81%8B%E3%82%89json%E3%82%92%E5%8F%97%E4%BF%A1%E3%81%99%E3%82%8B)

この記事みたいに対策が必要かもしれませんが。  
[Electron-Vue+axios+FlaskでHttp通信を行いたい](https://teratail.com/questions/196746)  
[Setting header: 'Content-Type': 'application/json' is not working
#86](https://github.com/axios/axios/issues/86)  
[Setting 'Content-Type' header does not work.
#2544](https://github.com/axios/axios/issues/2544)


CC BY-SA 4.0
2019-12-18T01:17:12.953
61526
2019-12-18T01:39:19.417
2019-12-18T01:39:19.417
26370
26370
61525
answer