質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

Heroku

HerokuはHeroku社が開発と運営を行っているPaaSの名称です。RubyやNode.js、Python、そしてJVMベース(Java、Scala、Clojureなど)の複数のプログラミング言語をサポートしている。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

解決済

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

hekatonkeiru
hekatonkeiru

総合スコア8

Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

Heroku

HerokuはHeroku社が開発と運営を行っているPaaSの名称です。RubyやNode.js、Python、そしてJVMベース(Java、Scala、Clojureなど)の複数のプログラミング言語をサポートしている。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

1回答

0評価

0クリップ

503閲覧

投稿2021/12/07 05:18

編集2021/12/07 05:26

前提・実現したいこと

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>

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

hoshi-takanori

2021/12/07 10:02

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

2021/12/08 00:01

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

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

Heroku

HerokuはHeroku社が開発と運営を行っているPaaSの名称です。RubyやNode.js、Python、そしてJVMベース(Java、Scala、Clojureなど)の複数のプログラミング言語をサポートしている。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。