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

実現したいこと

以下の構成で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"}}) にするなど色々やってみたのですが、エラーは同じでうまく行きませんでした。

補足

特になし

行動規範の内容に同意します

回答1件

ベストアンサー

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を使ってみようと思います。ありがとうございました。

行動規範の内容に同意します