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

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

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

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

jQuery

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

VPS

VPS(バーチャル・プライベート・サーバ)は、仮想化されたサーバをレンタルするサービスで、共有サーバでありながら専門サーバと同等の機能を果たします。物理的な専門サーバより安価で提供できるメリットがあります。

Q&A

解決済

1回答

167閲覧

jQueryとFlaskをサーバー上で連携したいがうまくいかない

oyatsu8

総合スコア97

Flask

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

jQuery

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

VPS

VPS(バーチャル・プライベート・サーバ)は、仮想化されたサーバをレンタルするサービスで、共有サーバでありながら専門サーバと同等の機能を果たします。物理的な専門サーバより安価で提供できるメリットがあります。

0グッド

0クリップ

投稿2024/02/20 06:07

編集2024/02/21 15:03

実現したいこと

以下の構成でVPSサーバーにファイルをおいて実行します。
index.htmlの<div id="test-hi"></div>にFlaskから返ってきた、
Data received successfully test! を表示したいです。

VPSサーバーにはUbuntu、apacheをインストールしてあります。
そのため、index.htmlはポート443、
app.pyはポート5400で動かします。

url: https://example.com/test - front index.html - backend app.py

発生している問題・分からないこと

下記のエラーが出てFlaskと連携しません。
特に理解できていない部分は、Flask側のCORSの書き方と、
jQuery側でのflaskへデータを投げる部分で、
もしかして、ネットワークの設定がおかしいのかもしれないと、
000-default.confも貼らせていただきます。
このような通信ができない場合は、どのような確認をしたらいいのでしょうか
アドバイスをよろしくお願いします。

jquery-3.6.4.min.js:2 POST https://example.com:5240/test/backend/data net::ERR_CONNECTION_TIMED_OUT

該当のソースコード

index.html(jQuery)

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>jQuery Data Sending</title> 7 <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> 8</head> 9<body> 10 11 <div id="test-hi"></div> 12 13<script> 14 $(document).ready(function () { 15 // 送信するデータ(例としてJSON形式) 16 var dataToSend = { 17 key1: 'value1', 18 key2: 'value2' 19 // 他のデータも必要に応じて追加 20 }; 21 22 $.ajax({ 23 type: 'POST', 24 url: 'https://example.com/test/backend/data', 25 contentType: 'application/json;charset=UTF-8', 26 data: JSON.stringify(dataToSend), 27 success: function (response) { 28 console.log('Success:', response); 29 }, 30 error: function (error) { 31 console.error('Error:', error); 32 } 33 }); 34 }); 35</script> 36 37</body> 38</html>

Flask(python)app.py

1from flask import Flask, jsonify, request 2from flask_cors import CORS 3 4app = Flask(__name__) 5CORS(app, resources={r"/test/backend/*": {"origins": "https://example.com"}}) 6 7@app.route('/test/backend/data', methods=['POST']) 8def receive_data(): 9 data = request.json 10 # ここでデータの処理を行う(例: データを取得し、加工、保存など) 11 response_data = {"message": "Data received successfully test!"} 12 return jsonify(response_data) 13 14if __name__ == '__main__': 15 app.run(port=5400)

000

1<VirtualHost *:80> 2 ServerName example.com 3 ServerAlias www.example.com 4 Redirect permanent / https://example.com/ 5</VirtualHost> 6 7<VirtualHost *:443> 8 ServerName example.com 9 ServerAlias www.example.com 10 11 DocumentRoot /var/www/html/ 12 #DocumentRoot /var/www/html/test/front/ 13 14 SSLEngine on 15 SSLCertificateFile /etc/letsencrypt/live/example.com/fullchain.pem 16 SSLCertificateKeyFile /etc/letsencrypt/live/example.com/privkey.pem 17 SSLCertificateChainFile /etc/letsencrypt/live/example.com/chain.pem 18 19 # Log files 20 ErrorLog ${APACHE_LOG_DIR}/error.log 21 CustomLog ${APACHE_LOG_DIR}/access.log combined 22 23 24 # ProxyPass configuration for Vue.js application 25 ProxyPass /test/front http://localhost:8000/ 26 ProxyPassReverse /test/front http://localhost:8000/ 27 28 # ProxyPass configuration for Flask application 29 #ProxyPass /test/backend http://localhost:5400/ 30 #ProxyPassReverse /test/backend http://localhost:5400/ 31 32 33 # ProxyPass configuration for Flask application 34 ProxyPass /test/backend http://localhost:5400/ 35 ProxyPassReverse /test/backend http://localhost:5400/ 36 37 # Additional proxy settings if needed 38 ProxyPreserveHost On 39 40 <Proxy *> 41 Order deny,allow 42 Allow from all 43 </Proxy> 44 45 <Location /> 46 Order allow,deny 47 Allow from all 48 </Location> 49 50 <Directory /var/www/html/test/front/> 51 Options Indexes FollowSymLinks 52 AllowOverride All 53 Require all granted 54 </Directory> 55 56</VirtualHost>

試したこと・調べたこと

  • teratailやGoogle等で検索した
  • ソースコードを自分なりに変更した
  • 知人に聞いた
  • その他
上記の詳細・結果

ajax部分のurlを url: 'https://example.com:5400/test/backend/data', にしたり、
CORSの部分を、CORS(app, resources={r"/test/backend/*": {"origins": "https://example.com:5400"}}) にするなど色々やってみたのですが、エラーは同じでうまく行きませんでした。

補足

特になし

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

ProxyPass /test/backend http://localhost:5400/と設定しているので、/test/backendにアクセスを、http://localhost:5400に送っていると思います。

Flask側は@app.route('/test/backend/data', methods=['POST'])なので、ここにアクセスするにはhttp://localhost:5400/test/backend/dataにアクセスする必要があります。
つまり、Flaskに外からアクセスするには、https://{domain}/test/backend/test/backend/dataにアクセスしなければならないと思いますが、思った通りにできていますか?

あと、ProxyPassReverseを入れている理由が分かりません。要らないのでは?リダイレクトする機能みたいですが。

また、ReverceProxyなので、Gunicornあたりを使っているのかと思いましたが、もしかして python app.py とか flask run とかでFlaskを動作させていますか?
Flaskについているサーバは開発用、テスト用なのでこれで動かさないでください。
Apacheならmod_wsgiを使うとか、reverce_proxy使うならLinuxの場合Gunicornを使うとか、とりあえず開発サーバを使わないで下さい。
本番環境への展開(Deployment to Production)

ついでに、同じサーバ上から取得して自分のサーバにアクセスする場合(ドメインが同じ場合)は、CORS要らないと思います。

投稿2024/02/21 01:47

FiroProchainezo

総合スコア2401

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

oyatsu8

2024/02/21 04:31 編集

ありがとうございます。 https://{domain}/test/backend/test/backend/dataにアクセスしなければならないと思いますが、思った通りにできていますか?>>https://{domain}/test/backend/data のつもりで書いていました、、 修正する場合に、 ProxyPass /test/backend http://localhost:5400/と設定して、/test/backendにアクセスを、http://localhost:5400に送り、 Flask側を@app.route('/data', methods=['POST'])にしたら、 https://{domain}/test/backend/dataにアクセスできるのでしょうか? python app.py で動作させていました、、Apacheを使っているので、mod_wsgiを調べてみます。
FiroProchainezo

2024/02/21 05:15

`mod_wsgiを調べて見ます` とのことなので、そちらをやってから、また別途質問した方が良いと思います。 `mod_wsgi`を使う場合はリバースプロキシ要らなくなるので、そもそも構成が変わります。 この質問は適当に終わらせて、また質問が出てきたら新しく質問してはいかがでしょうか。 > Flask側を@app.route('/data', methods=['POST'])にしたら、 > https://{domain}/test/backend/dataにアクセスできるのでしょうか? この程度でしたら、1行変えるだけなので、やってみてはいかがでしょうか。 質問書くより早いです。 開発サーバではstaticファイルも配信してくれますが、mod_wsgiは使った事が無いので、その辺がよく分かっていません。 staticファイルはWebサーバが配信した方が良いはず(キャッシュ使えたり)なので、構成やどこが何を配信しているのかを認識しながらやった方が良いと思います。 なので、mod_wsgiを調べる前に、flask runとかで動かしている方を弄って見て、TOPページを表示できるようにしてからの方が混乱が少ないかもしれません。
oyatsu8

2024/02/21 06:03

ありがとうございます。そうしてみます。本当に何も知らずにやろうとしていると改めて気づきました。とりあえず動かせるようにしてみて、mode_wsgiを使ってみようと思います。ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.49%

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

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

質問する

関連した質問