実現したいこと
以下の構成で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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2024/02/21 04:31 編集
2024/02/21 05:15
2024/02/21 06:03