使用 Flask 和 React 的 localhost CORS 错误

Question

我在开发我的 React 应用程序时遇到了一些问题。在客户端，我使用 Axios 向 API（Flask）发出请求。

问题是我只有在将请求发送到 localhost API 时才经常收到 CORS 错误。我在 Heroku 中运行相同的 API，没有任何错误。

API 路由 = http://127.0.0.1:5000

客户端路由 = http://localhost:3000/#/

客户端代码：

const endpoint = process.env.REACT_APP_ENDPOINT;
// Fetch API data
const [data, setData] = useState([{}]);
useEffect(() => {
    axios.get(endpoint + "/api/rooms")
        .then((data) => {
            console.log("API endpoint data retrieved.");
            if (data[200] !== "No Rooms") {
                setData(data);
            }
        }).catch((err) => {
            console.error(err.message);
            console.log("No rooms retrieved from API endpoint.");
        });
}, [endpoint]);

服务器（Python）代码：

import os
from flask import Flask
from flask_socketio import SocketIO
from flask_cors import CORS, cross_origin
from dotenv import load_dotenv
from app_modules.util.rooms import Rooms

load_dotenv()

app = Flask(__name__, static_folder="/client/build")
app.config['SECRET_KEY'] = os.getenv("app_key")
app.config['CORS_HEADERS'] = "Content-Type"
ALLOWED_ORIGINS = os.getenv("ALLOWED_ORIGINS")

cors = CORS(app, resources={"/*": {"origins": ALLOWED_ORIGINS}}, support_credentials=True)

socketio = SocketIO(app,
                    cors_allowed_origins=ALLOWED_ORIGINS,
                    logger=False,
                    engineio_logger=False,
                    cors_credentials=True)

rooms = Rooms()


@app.route('/api/rooms')
@cross_origin(supports_credentials=True)
def home():
    return {"rooms": rooms.secure_api} if rooms.secure_api else {"200": "No Rooms"}

注意： ALLOWED_ORIGINS=*

但我不断收到此错误：

Answer 1

在您的服务器代码更改

ALLOWED_ORIGINS = os.getenv("ALLOWED_ORIGINS")

到

ALLOWED_ORIGINS = ['localhost', '127.0.0.1']