Reaktieren Sie die API der Flask das Aufrufen von CORS -Fehler ⇐ Python

[Guest]

In meiner React -App rufe ich einen Anruf bei einer Flask -API an, aber sie wird von CORs blockiert, was den folgenden Fehler gibt: Zugriff auf XMLHTTPREQUEST unter 'http: // localhost: 5000/' aus Origin 'http: // localhost: 5173' wurde durch CORS-Richtlinien blockiert: Nein 'Access-Control-Owh-Origin' Header ist in der angeforderten Ressource vorhanden.
Reagieren Sie: < /p>
import { useEffect, useState } from "react";
import axios from "axios";
import "./App.css";

function App() {
useEffect(() => {
// Define the API URL
const apiUrl = "http://localhost:5000/";

// Make the Axios GET request
axios
.get(apiUrl)
.then((response) => {
// Handle the response data
console.log(response);
})
.catch((error) => {
// Handle any errors
console.error("Error fetching data:", error);
});
}, []);
return Hello;
}

export default App;
< /code>
Flask: < /p>
from flask import Flask
from flask_cors import CORS
from flask import jsonify

app = Flask(__name__)

@app.route("/", methods=["GET"])
def get_example():
"""GET in server"""
response = jsonify(message="Simple server is running")

# Enable Access-Control-Allow-Origin
response.headers.add("Access-Control-Allow-Origin")
return response

if __name__ == '__main__':
app.run()
< /code>
Dinge, die ich ausprobiert habe: < /p>

• Hinzufügen von Headern direkt zur Antwort < /li>
  < li> App-App in CORS (App) < /li>
  Verwenden des @cross_origin-Dekors mit Localhost < /li>
  app.config?cors_Headers '] =' Inhalt- content- Geben Sie '
• All das oben zusammen

Egal was passiert, der Fehler bleibt bestehen.