FlaskからJSONを返してAPIサーバー風に稼働させていたのですが、なぜかfetchしたJavaScript側でエラーが...なんだこれとなったのですが、バックエンドのPython側のミスでした。何気に気付きにくかったりするので、またミスしたときのために備忘録として残しておきます。

今回の環境がこちら

エラー内容

今回起きたエラーがこちらです。

SyntaxError: Unexpected token o in JSON at position 1

予期せぬトークンが頭文字にあったらしいです。なんだこれ...
他の場所では特にエラーなかったのになぜここだけ...

Pythonの方を確認してみます。

Pythonのミス

単にPythonのミスでした。ミスの部分だけピックアップします。

@app.route('/test')
def test():
    obj = {
        'foo': 'bar',
    }
    
    return jsonify(obj)

何気にわかりにくいんです。

json.dumps()してなかった......

めっちゃくだらないミスで萎えますねこれ。

というわけで、return jsonifyする前にしっかりdictをjsonにダンプしておきます。

改良版が以下。

@app.route('/test')
def test():
    obj = {
        'foo': 'bar',
    }
    
    obj = json.dumps(obj)
    
    return jsonify(obj)

これでもう、フロント側ではエラー起こさせません!!!!

簡単に直るけど、気付きにくいってやつです。Flask使ってJSONで通信するときは、フロント側でエラーが出たら、JSONを送っているバックエンドも確認すると良いでしょう。

今回はこれだけです!