アプリをデプロイしましたが、フロントから値を安定してサーバーに送ることができません。

Question

前提・実現したいこと

Herokuにサーバーに値を送信するアプリ（ログイン機能あり）をデプロイしました。
フロントからサーバーに値を送信するときajaxを使用しています。

現在、Herokuにアプリをデプロイした際に、
値の送信が成功するパターンと成功しないパターンに分かれるなど挙動が安定しません。
おそらくajax周りに問題があるとは思います。
解決策を教えていただけると幸いです。

アプリの構成は以下のようにしています。

環境：Heroku
フロントエンド: HTML, JavaScript(jQuery)
サーバーサード: Python(Flask)

※Pythonは3.9.7を使用しています。

発生している問題

前述の通り、値の送信の挙動が安定しません。
ちなみにエラーの時は以下のように返ります。

Failed to load resource: the server responded with a status of 401 (UNAUTHORIZED)

なお以下の場合は問題なく安定してサーバーに値を送ることができます。

• ローカル環境下
• ログイン機能を取り除いた場合

試したこと

サーバーに送信する形式をJSONにしても結果は変わりませんでした。

###ディレクトリ

hoge_app
│  
├─app.py
│
├─static
│      Send.js
│
└─templates
        index.html
        login.html

ソースコード

#app.py
# -*- coding: utf-8 -*-

import os
from flask_sqlalchemy import SQLAlchemy
from flask import Flask, render_template, request
from flask_login import UserMixin, LoginManager, login_user, login_required
from werkzeug.security import check_password_hash
import flask_wtf
import wtforms
from wtforms import validators
from itsdangerous.url_safe import URLSafeTimedSerializer


app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = variable.SQLALCHEMY_DATABASE_URI

app.config['SECRET_KEY'] = os.urandom(24)

db = SQLAlchemy(app)
app.secret_key = os.urandom(24)
SALT = os.urandom(24)
currentDirctory = os.getcwd()
login_manager = LoginManager()
login_manager.init_app(app)

class NewPwdForm(flask_wtf.FlaskForm):
    token = wtforms.HiddenField('token', [
        validators.InputRequired()])
    new_pwd1 = wtforms.PasswordField('PW', [
        validators.InputRequired(),
        validators.EqualTo('new_pwd2')])
    new_pwd2 = wtforms.PasswordField('PW', [
        validators.InputRequired()])

class AddressForm(flask_wtf.FlaskForm):
    mail = wtforms.StringField('mail', [
        validators.Email(message='WRONG FORMATT'),
        validators.InputRequired(message='PUT IN ADDEESS')])

class User(UserMixin, db.Model):
    id = db.Column(db.Integer, primary_key=True) 
    username = db.Column(db.String(), nullable=False, unique=True)  
    password = db.Column(db.String()) 

@login_manager.user_loader
def load_user(user_id):
    return User.query.get(int(user_id))


@app.route('/', methods=['GET', 'POST'])
def login():
    if request.method == "POST":
        username = request.form.get('username')  
        password = request.form.get('password')  
        user = User.query.filter_by(username=username).first()

        if user is None:
            return render_template('login.html', login_Message="※NO USER※")

        if check_password_hash(user.password, password):
            login_user(user)
            return render_template('index.html', username=str(user.username))
        else:
            return render_template('login.html', login_Message="※WRONG PW※")
    else:
        return render_template('login.html')


def create_token(user_id, secret_key, salt):
    serializer = URLSafeTimedSerializer(secret_key)
    return serializer.dumps(user_id, salt=salt)


def load_token(token, secret_key, salt, max_age=600):
    serializer = URLSafeTimedSerializer(secret_key)
    return serializer.loads(token, salt=salt, max_age=3600)


@app.route('/sendMovement', methods=['GET', 'POST'])
@login_required
def sendMovement():
    if request.method == "POST":
        PostMonement = str(request.form['Monement'])  

    return render_template('index.html')

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

//Send.js
function one_click() {
    Movement("move_one");
    return;
}

function two_click() {
    Movement("move_two");
    return;
}


function three_click() {
    Movement("move_three");
    return;
}


function Movement(strMovement) {
    var fData = new FormData();
    fData.append('Monement', strMovement);
    ajaxSend(fData, '/sendMovement')
    return;
}

function ajaxSend(fData, urlFlask) {
    //ajax
    $.ajax({
        url: urlFlask,
        type: 'POST',
        async: false,
        data: fData,
        contentType: false,
        processData: false,
        success: function(data, dataType) {
            console.log('Success', data);
            alert("Success!");
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            console.log('Error : ' + errorThrown);
            alert("Error!");
        }
    });
}

<!-- index.html -->
<!DOCTYPE html>
<html>

<body>
    <button type="button" onclick="one_click();">ONE</button>
    <button type="button" onclick="two_click();">TWO</button>
    <button type="button" onclick="three_click();">THREE</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="/static/SendToRPi.js?p=(new Date()).getTime() "></script>
</body>

</html>

Comments

[hoshi-takanori]

Web アプリがうまく動かない場合、HTTP リクエストとレスポンスの内容を観察して、期待する値がやりとりできてるかを確認するのが重要かと。(そのためには HTTP の基礎知識が必要ですが…。)
https://my-terrace.com/chrome_http_res/

[hekatonkeiru]

hoshi-takanori様
コメントありがとうございます。
参考にさせていただきます。

Answer 1

すいません。
自己解決できました。
app.pyの@login_requiredが余計でした。

なので

#app.py
@app.route('/sendMovement', methods=['GET', 'POST'])
@login_required
def sendMovement():
    if request.method == "POST":
        PostMonement = str(request.form['Monement'])  

    return render_template('index.html')

を

#app.py
@app.route('/sendMovement', methods=['GET', 'POST'])
def sendMovement():
    if request.method == "POST":
        PostMonement = str(request.form['Monement'])  

    　　return render_template('index.html')
　　return redirect('/')

に変更しました。

以上よろしくお願いいたします。