はじめに
「localhost:5000」がリクエストエラー対策の備忘録です💁
初心者です😅
間違えてる部分多々あると思います。
もし見つけた場合、ツッコミいただけると助かります🙇
結論
🦁結論🦁
- macOS Monterey以降の場合Mac のポート 5000 で Air Play のサーバーが起動している。
- テストでポート 5000を利用する場合は別のポート（8000）を利用する。
内容
「localhost:5000」を利用しようとしたら下記のエラーが出た。
Access to fetch at 'http://localhost:5000/${PATH}' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
調べてみたらmacOS Monterey以降（Ventura、Sonoma）
を利用してるとだとlocalhost:5000は「Airplay」 のサーバーが起動しているとのこと。
なのでFlask など開発サーバーでポート 5000 を使おうとすると競合するので、Air Play を無効化するかポート 5000 以外を使うと良い。
ポート8000（http://localhost:8000/send-email）
EmailSend.py
from flask import Flask, request, jsonify
from flask_cors import CORS
app = Flask(__name__) # Flaskを使うための宣言（初期化）
CORS(app)
# ~~~~~~~~~~~~~~~~~~~~
if __name__ == '__main__':
app.run(debug=True, port=8000)
注意点⚠️
- サーバーにデプロイした際のHTTPリクエストするURLに置き換える。
- テストする際にはReactを稼働させるターミナルとサーバーを起動してるターミナルを分けて稼働してる状態が必要。
- CORS(app)は異なるオリジン（ドメイン、プロトコル、ポート）からのリクエストを許可する。（セキュリティは弱い）