vue.jsでhtmlで入力された情報をcgiでpythonに送れない

Question

vue.jsでサイトに入力された情報をcgiを使ってpython側に送りたいのですが、python内で500 (Internal Server Error)が起きてしまい動作してくれません。

試しにcgiで受け取った情報を変数に入れるコードの部分を、cgiで受け取った情報ではなく、文字列を入れるとそれエラーは起きなく、関数も動き取得したい情報が取得できますので下記に記載するコード以外のところは問題ないかと思われます。

権限は755で受け取れるようにしてあるのですが、、
どなたかわかる方おりましたらご教授していただけると幸いです。。。。。

vue.js↓

var app = new Vue({
    el: '#app',
    data: {
        city:'',
        context: {},
        isActive: false,
        isActiveMore:false,
        check_message:''
       
    },
    methods: {
        postResult: function() {
            
            const url = 'http://localhost/post.py';
            
            
            // POSTでデータを渡す
            axios.post(url, {
                city: this.city
//html内ではinputのv-modelにcityと入れてあり、そこに入力した情報が入るようになっている。
##<input v-model="city" type="text" class="form-control" value='' placeholder="都市名を入力してください">##

               })
            .then(res => ##レスポンスのところは,pythonでpostで送られた情報を入れるコードを書かなかったら返ってきたので正常に動いていることが確認できている。
そのため省略。
             
        }
}
    }
)

python側↓
post.py

#!/usr/local/bin/python3
# -*- coding: utf-8 -*- 

import cgi
import requests
import cgitb
import json
import MySQLdb
from MySQLdb.cursors import DictCursor

form = cgi.FieldStorage()
city = form['city'].value
##上の二行を、下1行のようにcigでpostから得た情報を受け取る必要がない状態にすると動くし、値も返すことができる。
##city = 'saitama'

def test(city):
以下動くことが確認できているので省略

pythonファイルに下記を入れたところ500 serverエラーは解消できました。
しかし依然としてpostで送られた情報をキャッチしてくれません。

import sys
import io

sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')
print('Content-Type: text/html; charset=UTF-8\n')

form = cgi.FieldStorage()
city = form['city'].value
コード

Answer 1

Pythonのcgi.FieldStorageはPOSTリクエストのbody部がフォームリクエストの形式であることを前提としています。
それに対して、axiosはREADMEの説明にもあるとおり、デフォルトでは引数のパラメータをjsonフォーマットとしてリクエストします。

そのため、送り手と受け手の方式をどちらかに揃える必要があります。

方法1: フォームリクエスト形式に揃える

axiosの呼び出し側を、ドキュメントに従ってフォームリクエストで渡すように編集します。

const url = 'http://localhost/post.py';
const params = new URLSearchParams();
params.append('city', this.city);
// POSTでデータを渡す
axios.post(url, params)
  .then(res => {
    // 略
  }) 

方法2: JSONフォーマット形式に揃える

post.py側を、リクエストボディをjson文字列として扱うように編集します。

#!/usr/local/bin/python3
# -*- coding: utf-8 -*-
import os
import sys
import cgi
import json

content_length = int(os.environ["CONTENT_LENGTH"])

data = json.loads(sys.stdin.read(content_length))
# data["city"]

# 後続処理は省略

Comments

[kensho-]

ご回答ありがとうございます！

attakeiさんの回答通り編集したのですが、500のサーバーエラーが起きてしまします。。。。

下記のように編集しました

vue,js
const url = 'http://localhost/post.py';
const params = new URLSearchParams();
params.append('city', this.city);

// POSTでデータを渡す
axios.post(url, params)
.then(res => {

python

#!/usr/local/bin/python3
# -*- coding: utf-8 -*-

import cgi
import requests
import cgitb
import json
import MySQLdb
from MySQLdb.cursors import DictCursor
import sys
import io
import os

content_length = int(os.environ["CONTENT_LENGTH"])

data = json.loads(sys.stdin.read(content_length))

city = data["city"]

確認なのですが
仮にprint(data["city"])を出力したらinputのテキストが取れる認識でよろしかったでしょうか？？

一応print(data)とした時にinputのテキストが取れるパターンで試したのですがこれでもエラーが起きてしまいます、、、（この下のコードで変数cityがあるコードはdataに変えたのでそこでのエラーは起きてないかと思われます）

[attakei]

このコメントを読む限り、両方の「揃える」をやってしまってませんか？

両方のコードを適用してしまうと、受け手と送り手の期待する形式が逆になっちゃうので、
どちらかのことだけやって下さい。

[kensho-]

ありがとうございます！
attakeiさんのおっしゃる通り片方だけ直したらできました！！

本当にここの部分苦労していたので助かりました！

ありがとうございます！！！