axiosでPOSTした値をapiで受け取りたい。

Question

flaskでreactからPOSTメソッドで値を受け取りたい

flask, sqlAlchemy(api)とreact(画面側)でECサイトを練習で作っています。
画面側でフォームに入力された値をapiで取得しDBに保存する機能を作る際に、
エラーが表示され困っております。

現在、デバッグで確認したところ、

DEBUG in app: ImmutableMultiDict([('{"name":"白いズボン","price":"4000","imgLink":"p5.jpg","detail":"綺麗なシルエットです。"}', '')])

取得できていそうだが、上手くデータが認識されていないようでした。

実現したいこと

• apiで画面のフォームから受け取った値を取得したい。

発生している問題・エラーメッセージ

werkzeug.exceptions.BadRequestKeyError: 400 Bad Request: The browser (or proxy) sent a request that this server could not understand.
KeyError: 'name'

Access to XMLHttpRequest at 'http://0.0.0.0:5000/create' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

POST http://0.0.0.0:5000/create net::ERR_FAILED 500

該当のソースコード

# coding: UTF-8
from nis import cat
import os
from itertools import product
from pickle import TRUE
from re import template
from unicodedata import category, name
from click import format_filename
from flask import *
from flask import request
from flask_sqlalchemy import SQLAlchemy
from werkzeug.utils import secure_filename
import psycopg2
# from flask_marshmallow import Marshmallow
from marshmallow_sqlalchemy import SQLAlchemyAutoSchema
from flask_cors import CORS, cross_origin

# データベースのファイルパスを作成。
basedir = os.path.abspath(os.path.dirname(__file__))

app = Flask(__name__, static_url_path='', static_folder='./practice_react_app/build', template_folder='./practice_react_app/build')
CORS(app, origins=["localhost:3000"])

app.config['DEBUG'] = True
app.config['SQLALCHEMY_DATABASE_URI'] = "postgresql+psycopg2://xxxxx.xxxxxx@localhost:5432/xxxx_db"
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False


db = SQLAlchemy(app)
db.init_app(app)

class Product(db.Model):
    id = db.Column(db.Integer, primary_key=True,
                   nullable=False, autoincrement=True)
    name = db.Column(db.String(30))
    price = db.Column(db.Integer)
    detail = db.Column(db.String(200))
    imgLink = db.Column(db.String(30))

@app.route('/create', methods=['POST'])
@cross_origin(supports_credentials=True)
def insert():
    app.logger.debug(request.form) // debug調査用
    if request.method == 'POST':

        form_name = request.form['name']
        form_price = request.form['price']
        form_detail = request.form['detail']
        form_imgLink = request.form['imgLink']
        # form_category = request.form.get('category')
        
        product = Product(
            name=form_name,
            price=form_price,
            detail=form_detail,
            imgLink=form_imgLink
        )
        db.session.add(product)
        db.session.commit()
        return redirect('http://localhost:3000', code=200)

if __name__ == '__main__':
    app.run(host="0.0.0.0", port=int("5000"), debug=True)

import { useForm } from "react-hook-form";
import axios from 'axios';

export const AddProduct = () => {
    const { register, formState: { errors }, handleSubmit } = useForm({
        defaultValues: {
            name: '',
            price: 0,
            imgLink: '',
            detail: ''
          }
    });
    const postData = (data) => {
        const name = data.name;
        const price = Number(data.price);
        const imgLink = data.imgLink;
        const detail = data.detail;

        const postURL = "http://0.0.0.0:5000/create"
        axios.post(postURL, data,
        {headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
        .then(function (response) {
            console.log(response);
          })
          .catch(function (error) {
            console.log(error);
          });
    };
    
    return (
        <div>
            <form onSubmit={handleSubmit(postData)}>
                <label >商品名:</label>
                <br />
                <input 
                {...register("name", { required: true })} 
                aria-invalid={errors.firstName ? "true" : "false"} 
                />
                {errors.name?.type === 'required' && <p role="alert">商品名を入力してください。</p>}
                <br />
                
                <label >値段:</label>
                <br />
                <input type="text" inputmode="numeric"
                {...register("price", { required: true })} 
                aria-invalid={errors.price ? "true" : "false"} 
                />円
                {errors.price?.type === 'required' && <p role="alert">値段を入力してください。</p>}
                <br />


                <label >画像リンク:</label>
                <br />
                <input 
                {...register("imgLink", { required: true })} 
                aria-invalid={errors.imgLink ? "true" : "false"} 
                />
                {errors.imgLink?.type === 'required' && <p role="alert">画像のリンクを入力してください。</p>}
                <br />


                <label >詳細:</label>
                <br />
                <input 
                {...register("detail", { required: true })} 
                aria-invalid={errors.detail ? "true" : "false"} 
                />
                {errors.detail?.type === 'required' && <p role="alert">詳細を入力してください。</p>}
                <br />

                <input type="submit" />
            </form>
        </div>
    );

試したこと

Access-Control-Allow-Origin:*を設定

補足情報（FW/ツールのバージョンなど）

python 3.9.0

Comments

[退会済みユーザー]

> 取得できていそうだが、上手くデータが認識されていないようでした。

このような結果がかえって来てるんですよね？
DEBUG in app: ImmutableMultiDict([('{"name":"白いズボン","price":"4000","imgLink":"p5.jpg","detail":"綺麗なシルエットです。"}', '')])

それで、うまくデータが認識された、予想されたデータはどんなもん？？？

[asannu]

> 上手くデータが認識されていないようでした。
KeyError: 'name'
nameが認識されていないと考えています。

> うまくデータが認識された、予想されたデータはどんなもん？？？
```
{"name":"白いズボン","price":"4000","imgLink":"p5.jpg","detail":"綺麗なシルエットです。"}
```
予想したデータは上記です。

Answer 1

headers: {'Content-Type': 'application/x-www-form-urlencoded'}}
を削除し、content-typeをjsonで送るようにしました。（axiosはcontent-typeを指定しないとjsonとなる。）

受け取るflask側をform_name = request.form['name']ではなく、form_name = request.json['name']とすることでデータの受け取りができました。

Answer 2

0.0.0.0じゃなくて、localhostじゃないですか？

それから、必要かわかりませんが、
https://flask-cors.corydolphin.com/en/latest/api.html#extension
↑公式ドキュメントによると

e.g., CORS(app, origins=[“http://localhost:8000”, “https://example.com”]).

とあるので、

CORS(app, origins=["localhost:3000"])

部分はhttp://localhost:3000とした方が良いかもしれません。

Comments

[asannu]

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

```localhost```としてみましたが、400エラーとなりました。。。
また、```host="0.0.0.0"```で指定しているため、```http://0.0.0.0:5000/create```としておりました。

> 部分はhttp://localhost:3000とした方が良いかもしれません。
ありがとうございます。こちら修正しました。

しかしまだ、同じエラーがでており、解決できませんでした。

[FiroProchainezo]

> ```localhost```としてみましたが、400エラーとなりました。。。

エラーメッセージはなんですか？
react側、Flask側、両方のエラーメッセージを確認してみてください。
何か出てるなら質問文を修正して、記載いただけると、回答が付くかもしれません。

[asannu]

エラーメッセージが伝えられておらずすみません。

```
werkzeug.exceptions.BadRequestKeyError: 400 Bad Request: The browser (or proxy) sent a request that this server could not understand.
KeyError: 'name'
```
上記でした。nameが認識できていないところに問題があり、react側、Flask側をそれぞれ修正して解決できました。ご協力ありがとうございました。