Vue.jsとFlaskを連携したアプリをVPSサーバーで公開したいがうまくできない

実現したいこと

VPSサーバーを借りて、Ubuntu,Apacheをインストールして、sshで繋ぎ、Vue.jsアプリでFlaskを連携したものを https://test.com/test/vue_front/で公開しようとしています。Vue.jsアプリは　https://test.com/test/vue_front/　にあり、$ python3 -m http.server で実行すると、
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...　が出ます。
更にこのVue.jsアプリはjQueryを使って、Flaskと連携しており、
Flaskは、https://test.com/test/test-flask/　にあり、Docker上でdocker run -p 5400:5400 flask_backend
で実行すると、 * Running on http://127.0.0.1:5400　と表示されます。

###ファイル構成
testフォルダ
test-flaskフォルダ
app.py
vue_frontフォルダ
index.html(Vue.jsをCDNで読み込んでいる)
test.js(jQuery)

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

しかし、Vue.jsアプリの方でflaskを呼び出すボタンUIを押すと、 次のエラーが出ます。どう解決したらいいかわかりません。
下記はerrorと、app.py(flask)の一部と、jQuery側のコードになります。

エラーメッセージ

error

1jquery-3.6.0.min.js:2 2 POST https://test.com:5400/test_action net::ERR_CONNECTION_TIMED_OUT

該当のソースコード

Apache

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

Flask（https://test.com/test/test

1``` app.py(flask) のCORS部分 2CORS(app, resources={r"/*": {"origins": "https://test.com"}}) 3... 4@app.route('/test_action', methods=['POST'])#getの場合だとAPIを確認しやすいが、POSTだとどうするのか 5def handle_test_action():

```jQuery（https://test.com/test/vue_front/　） $(function() { var isBtnClicked = false; $('#btn').click(function(event) { console.log("btnタイミング"); event.preventDefault(); var name01 = $('#name01').text(); var ingredients01 = $('#ingredients01').text(); var cook01 = $('#cook01').text(); var easy01 = document.getElementById('easy01').value; var daitai01 = document.getElementById('daitai01').value; $.ajax({ url: 'http://localhost:5400/test_action', type: 'POST', contentType: 'application/json', data: JSON.stringify({ 'name01': name01, 'ingredients01': ingredients01, 'cook01': cook01, 'easy01': easy01, 'daitai01': daitai01 }), success: function(response) { // ここでflaskから返されたレシピを#recipe要素のHTMLコンテンツに設定 $('#recipe').html(response.recipe); // #btn_fix を有効にする isBtnClicked = true; }, error: function(error) { console.log(error); } }); }); });

試したこと・調べたこと

上記の詳細・結果

初めはCORSエラーが出ていましたが、色々触っているうちに今のエラーに変わりました。しかし動いておらず、どこをどうしたらいいかわからず途方に暮れています。アドバイスを頂ければ幸いです。

補足

ローカルでは、CORS(app, origins='http://localhost:8000') 　とすることで、http://localhost:8000からのリクエストが200で通っていました。これがsshでVPSサーバー上ではやはりhttp://localhost:8000で動いているVue.jsのアプリは、ドメインが　test.comでVue.jsのアプリが、test.com/test/vue_front/にある場合でも、ローカルの時と同じように、CORS(app, origins='http://localhost:8000') 　とするのかなど、本番環境のことが、まだ勉強が追いついておらずわかりません。