前提・実現したいこと
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
#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
//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
<!-- 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>
まだ回答がついていません
会員登録して回答してみよう