Cross Origin Anfrage blockiert?

Ich möchte gerade eine REST-API für mein Heimnetzwerk einrichten um über z.B. einen button einen CMD befehl auf dem Server PC auszuführen.

Mein Pythonscript für die API:

from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/execute-command', methods=['POST'])
def execute_command():
  # Hier wird der Code zum Ausführen des Befehls eingefügt
  result = "Befehl wurde ausgeführt."
  return jsonify({"response": result})

if __name__ == '__main__':
  app.run(host='0.0.0.0', port=5000)

Mein HTML Script<!DOCTYPE html>
<html>
<head>
  <title>API Test</title>
</head>
<body>
  <button id="executeBtn">Befehl ausführen</button>
<script>
  document.getElementById('executeBtn').addEventListener('click', function() {
    fetch('http://localhost:5000/execute-command', { // Verwende absolute URL
      method: 'POST',
    })
    .then(response => response.json())
    .then(data => {
      console.log(data);
    })
    .catch(error => {
      console.error('Fehler:', error);
    });
  });
</script>
</body>
</html>

Ich bekomme als Fehler von Firefox in der Konsole:

Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf http://localhost:5000/execute-command. (Grund: CORS-Anfrage schlug fehl). Statuscode: (null).

Fehler: TypeError: NetworkError when attempting to fetch resource

Entschuldigung wenn es offensichtlich ist, bin da noch sehr frisch und habe keine Lösung gefunden.

1 Antwort

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, Webseite, JavaScript

30.07.2023, 21:32

Mein Pythonscript (...)

Ich frage mich, wieso die Frage dann trotzdem mit Themen getaggt wurde (PHP, JQuery, CSS, node.js), die mit alldem eindeutig nichts zutun haben.

Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource (...)

Da die localhost-Adresse als externe Ressource gewertet wird, kann man wohl davon ausgehen, dass dein HTML-Dokument nicht über diese Adresse ausgespielt wird. Solche Anfragen auf eine fremde Adresse werden vom Browser üblicherweise direkt geblockt.

Da dein HTML-Dokument eine statische Ressource darstellt, sollte es im Unterverzeichnis <Dein Projektordner>/static liegen. Starte dein Skript (bzw. den Webserver) und rufe dann dein HTML-Dokument über

http://localhost:5000/static/<Name deines Dokuments>.html

auf.

Ich habe deinen Fall kurz getestet, es klappt auf jeden Fall. Die erwartete Rückmeldung nach Buttonklick erscheint in der Browserkonsole.

Hallo zusammen,

nachdem ich jetzt Stunden, und zwar wirklich Stunden an nur einem, meiner Meinung nach unnötigem Problem gesessen habe, bitte ich nun um Hilfe.

Folgendes vorab: Nachdem ich die Datenbankkonfiguration ausgelagert habe, fing das Problem wieder an. Zuvor habe ich in die flask_app.py einfach folgendes eingetragen, was das Problem löste:

data = "Daten aus Python-Skript"

Ich persönlich arbeite mich ja in die Programmierung ein, habe aber das Gefühl, dass Flask irgendwie unnötig kompliziert ist. Aber das ist ja nicht wichtig.

Ich habe just for fun OpenAI mal über den Code laufen lassen: Zugegeben, ist das nicht die schlauste Option, aber nach 5 Stunden nur für diesen Code verzweifelt man doch etwas xD

Ich möchte Daten aus der Datenbank abrufen und auf der Webseite anzeigen lassen. Dazu existiert folgender Code:

Hauptverzeichnis/main.py:

from web.flask_app import app
from systm import main

if __name__ == '__main__':
    app.run(debug=True, host="0.0.0.0", port=5000)  # 5000 Standard

Hauptverzeichnis/systm/main.py:

from flask import Flask, render_template
from systm.d import create_db_connection

app = Flask(__name__)


# Datenbankverbindung initialisieren
db = create_db_connection()
cursor = db.cursor()


@app.route('/')
def display_data():
    # Hier können Sie Daten aus Ihrem Python-Skript abrufen
    cursor.execute("SELECT * FROM products")
    product_info = cursor.fetchall()

    # Diese Daten werden an die HTML-Datei übergeben
    return render_template('index.html', product_info=product_info)


# Route, um Produktinformationen anzuzeigen
@app.route('/products')
def display_products():
    # Informationen aus der Datenbank abrufen
    cursor.execute("SELECT * FROM products")
    product_info = cursor.fetchall()

    # Informationen an das HTML-Template übergeben und anzeigen
    return render_template('products.html', product_info=product_info)


if __name__ == '__main__':
    app.run(debug=True)

Hauptverzeichnis/systm/d.py:

import mysql.connector

def create_db_connection():
    db = mysql.connector.connect(
        host="",
        user="",
        password="",
        database=""
    )
    return db

Hauptverzeichnis/web/flask_app.py:

from flask import Flask, render_template
from systm.d import create_db_connection

app = Flask(__name__, template_folder='web/templates', static_folder='web/static')


# Deaktivieren des Template-Caching
app.jinja_env.auto_reload = True
app.config['TEMPLATES_AUTO_RELOAD'] = True
app.config['STATIC_AUTO_RELOAD'] = True


# Datenbankverbindung initialisieren
db = create_db_connection()
cursor = db.cursor()


@app.route('/')
def display_data():
    # Daten aus der Datenbank abrufen
    cursor.execute("SELECT * FROM products")
    product_info = cursor.fetchall()

    # Diese Daten werden an die HTML-Datei übergeben und angezeigt
    return render_template('index.html', product_info=product_info)

Hauptverzeichnis/web/templates/index.html :

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="style/css" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <h1>Produktinformationen</h1>
    <table>
        <tr>
            <th>Produktname</th>
            <th>Verschlüsselungstyp</th>
            <!-- Weitere Spalten hinzufügen -->
        </tr>
        {% for product in product_info %}
        <tr>
            <td>{{ product[0] }}</td>
            <td>{{ product[1] }}</td>
            <!-- Weitere Spalten hinzufügen -->
        </tr>
        {% endfor %}
    </table>
</body>
</html>

...zur Frage

JavaScript: fetch API Fehler - Anfrage wegen CORS blockiert?

Hi,

ein Freund von mir ist großer Fan von dem Format "Barsch'sche Filosofie", das auf SWR3 läuft. Es ist aber etwas umständlich, sich auf deren Seite durch die ganzen Witze durchzuklicken, vor allem, weil man so nicht sieht, was alles drin ist.

Ich habe erst vor ein paar Wochen begonnen, JavaScript richtig zu lernen und dachte mir, zu Übungszwecken probiere ich mal, damit eine Auflistung mit allen Witzen zu ermöglichen.

Essentiell hierbei ist für mich, dass mit jedem Seitenaufruf meines HTML-Dokuments die Filosofie-Webseite "abgefragt" wird (simples GET-Request), damit auch neue Sachen beim abrufen mit dabei sind, wenn die SWR-Redaktion neue einstellt. Das mache ich mit fetch(). Es funktioniert auch alles soweit super, es gibt nur ein Problem:

Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf https://www.swr3.de/comedy/barschsche-filosofie-100.html. (Grund: CORS-Anfrage war nicht http).

Mit CORS habe ich mich bislang noch nicht wirklich auseinandergesetzt, aber laut mdn liegt es an einem fehlenden Header in der Server-Response? Auf die hab ich in diesem Fall wohl keinen großen Einfluss...

Wenn ich schreibe, dass alles soweit super funktioniert, dann meine ich damit, dass es manchmal geht, manchmal aber nicht. In letzterem Fall bekomme ich diese Fehlermeldung. Das versuche ich momentan zu beheben. Kann mir jemand weiterhelfen?

...zur Frage

Was bedeutet dieser Fehler?

Ich wollte mit HTML, CSS und JS eine REST-API-Anfrage machen. Er schickt alles erfolgreich weg, aber dann kommt dieser Fehler.

Wie kann ich den beheben? Google hilft nicht!

Vielen Dank im Vorraus :)

...zur Frage

[Minecraft 1.13] /execute if Command für's checken wenn ein Spieler eine Bestimmte Position erreicht. Wie funktioniert das?

Hallo Leude

Ich würde hier gerne Wissen wie:

Mit /execute checken kann ob ein Spieler auf einer Bestimmten Koordinate ist.
Wie man damit einen /title Befehl triggern kann.

Ich habe schon folgendes Probiert:

/execute if entity @p[x=-798,y=4,z=0,distance=..5]

mit einen normalen Command-Block in der 1.13, allerdings stand auf dem Minecraft Wiki "and output it to a comparator" was war damit gemeint?

Andere Commands dazu, die mir nicht ganz sinnvoll erscheinen

execute if entity @p[x=160,y=66,z=157,distance=..5] run say hi
execute as @p[x=160,y=66,z=157,distance=..5] run execute [...] run execute [...] run execute [...] and so on

Ich bräuchte eure Hilfe jetzt.

~Akira

...zur Frage

Daten senden mit fetch?

Hallo,

ich will mit der Fetch API Daten senden und abrufen. Aber wen ich dies tue, kommt ein Fehler:

POST http://127.0.0.1:5500/api net::ERR_ABORTED 405 (Method Not Allowed)

Ich weiß gar nicht, wie ich diesen Fehler beheben soll. Ich habe dazu auch nichts hilfreiches bis jetzt gefunden.

Mein Ziel ist es, Daten mit Javascript an einen Server (für den Anfang an localhost) zu senden und diese dann von einem weiteren localhost-Server abrufen.

Das ist meine Index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <section id="control-center">
        <button id="get-btn">Get Data</button>
        <button id="post-btn" onclick="test()">Post Data</button>
        <script>
            function test(){
                const data = {"name": "somename"}
                const options = {
                    method: "POST",
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify(data)
                }
                fetch('/api', options)
            }
        </script>
    </section>
</body>
</html>

Und das ist meine app.js:

const express = require('express')
const app = express()
app.listen(3000, () => console.log('3000'))
app.use(express.static('public'))

app.post('/api', (req, res) => {
    console.log(req)
})

Wenn jemand eine bessere Methode hat, Daten an einen Server zu senden, dann würde ich diese auch mal gerne probieren.

...zur Frage

Wie füge ich etwas im CORS header hinzu?

Hi,

versuche auf meine lokale private API per get mit axios zuzugreifen, aber ich bekomme den Fehler:

Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf http://localhost:3000/getCountry?year=2014. (Grund: CORS-Kopfzeile 'Access-Control-Allow-Origin' fehlt).

Wo finde ich diese CORS-Datei und wie änder ich den header davon ab?

...zur Frage

Minecraft Zeit mit Command auslesen?

Hallo!

Ich programmiere gerade etwas und ich will, dass der Befehl um eine bestimmte Tageszeit ausgefüghrt wird. Also ein Scoreboard oder ein Execute der die Zeit auslesen kann. Ich habe schon überall gesucht, habe aber nichts gefunden...

Und nein, mit einem Tageslichtsensor geht es nicht, da ich ein datapack mache und nicht mit Commandblöcken arbeite.

Hat jemand ne Idee wie ich das machen könnt?

...zur Frage

Wie kann ich in Minecraft Befehle per Zufall ausführen?

Hallo.

Ich würde gerna einen Befehl z.B mit 20% wahrscheinlichkeit ausführen. Ich hab das mal in nem Youtube-Video gesehen, wo jemand die Neuerungen eine Minecraft-Version vorstellte (1.15 oder so).

Vllt. weis jemand wie das geht. Ich würde das in einem Execute-Command einbauen. (Java-Edition 1.16)

/execute as @e[...] if wahrscheinlichkeit run ...

Vielen Dank schonmal im vorraus!

Erik!

...zur Frage

Execute command?

Kann mir jemand helfen. Unzwar möchte ich das wenn ein Spieler auf der ganzen Welt einen Diamanterz abbaut das er 1 Herz Schaden bekommen soll.

Kann jemand sagen wie der Befehl dafür lautet?

...zur Frage

Fhem / Spracherkennung / OpenAI?

Ich würde gern von vielen Tablets das Microfon als Stream an meinen FHEM server schicken, das ganze in echtzeit transkripieren und via GPT API in FHEM befehle konvertieren lassen.

GPT soll also natürliche Sprache zusammen mit der Rauminformation (über den jeweiligen Audiostream) interpretieren zu einem FHEM befehl.

System soll so aufgebaut sein:

Lokale KI emfpängt Audiostream und sucht nach Stichwort "Hallo Computer", transkripiert den rest und schickt die Anfrage "Schalte das Licht am Schreibtisch an" an GPT, dieses übersetzt es dann in einen fhem command (zusammen mit der Info das die Frage aus Raum Z stammt welches man über den Audiostream ermittelt).

Kurzum... ne intelegentere Alexa. Hat jemand gute Infos über bestehende Projekte in der Richtung?

...zur Frage

Spotify API Get Methode Blocked?

Moin, hab mal ne Frage, da ich es einfach nicht hin bekomme. Ich habe vor sowas wie eine Musikwunsch Seite für ein Schul Projekt zu coden. Dafür will ich die Spotify API nutzen, damit man über diese Songs suchen kann. Es kommt aber immer in der Netzwerkanalyse der Fehler NS_BINDING_ABORTED, obwohl mein Access Token korrekt ist. Hier ist meine script.js

const API_ENDPOINT = "https://api.spotify.com/v1/search";
const ACCESS_TOKEN = "your_access_token";

function searchSong() {
    let songName = document.getElementById("song-name").value;

    fetch(`${API_ENDPOINT}?q=${songName}&type=track`, {
        headers: {
            "Authorization": `Bearer ${ACCESS_TOKEN}`
        }
    })
    .then(response => response.json())
    .then(data => {
        let songResults = data.tracks.items;

        if (songResults.length > 0) {
            let songList = document.createElement("ul");

            for (let i = 0; i < songResults.length; i++) {
                let song = songResults[i];

                let songItem = document.createElement("li");
                songItem.innerHTML = `<a href="javascript:void(0)" onclick="selectSong('${song.id}')">${song.name} by ${song.artists[0].name}</a>`;

                songList.appendChild(songItem);
            }

            let songResultsDiv = document.getElementById("song-results");
            songResultsDiv.innerHTML = "";
            songResultsDiv.appendChild(songList);
        } else {
            let songResultsDiv = document.getElementById("song-results");
            songResultsDiv.innerHTML = "Sorry, no songs found.";
        }
    })
    .catch(error => {
        const errorMessage = document.getElementById("error-message");
        errorMessage.innerText = error;
    });
}

function selectSong(songId) {
    fetch("db.php", {
        method: "POST",
        body: JSON.stringify({songId: songId}),
        headers: {
            "Content-Type": "application/json"
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert("Song added to the list!");
        } else {
            alert("Error adding song to the list.");
        }
    })
    .catch(error => {
        console.log(error);
    });
}

Hier ist dann noch die Index.html:

 <!DOCTYPE html>
<html>
<head>
    <title>DJ Song Request</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>DJ Song Request</h1>
    <form>
        <label for="song-name">Enter song name:</label>
        <input type="text" id="song-name" name="song-name">
        <button type="submit" onclick="searchSong()">Search</button>
    </form>
    <div id="song-results"></div>
</body>
</html>

Vielleicht kann mir ja jemand helfen, da ich echt nicht mehr weiter weiß, im vorraus schon mal Vielen Dank ;D

...zur Frage

Wie sende ich Variablen von JavaScript nach Flask via jQuery?

Hallo,

ich bin in JavaScript/jQuery und auch Python/Flask noch ein ziemlicher Anfänger. Ich versuche gerade, einfach nur ein JSON-Objekt aus JavaScript in einem HTML-Template mit Flask anzuzeigen.

Hier mein Code:

Flask:

from flask import Flask,request, render_template

app = Flask(__name__)

@app.route("/")
def rofl():
  return render_template("test.html")

@app.route("/test", methods=['POST'])
def test():
  Namensliste = request.get_json(True)
  print(Namensliste)
  return render_template("rofl.html", Namensliste=Namensliste)

if __name__ == '__main__':
  app.run(port=5200)

test.html:

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <form action="#" method="post">
    <button type="button" onclick="JSONTest()"> Send UserInfo</button>
  </form>
</body>

rofl.html:

<head>
  <meta charset="UTF-8">
  <title>Titel</title>
</head>
<body>
  NamensListe: {{Namensliste}}
</body>

JavaScript-Datei:

var myJason = {
  "name1" : "Jens",
  "name2" : "Josef",
  "name3" : "Johannes"
}

function JSONTest() {
  var MyJason= JSON.stringify(myJason);
  console.log(MyJason)
  $.ajax({
    type: 'POST',
    url: '/test',
    data: MyJason,
    success: function(data) {
      console.log(data, "Rückmeldung1");
  }});
}

Wie mein Code eigentlich funktionieren soll ist: Ich rufe die Route "/" auf, drücke auf den Button: "JSONTest()" und meine Funktion sendet via jQuery mein JSON-Objekt an "/test". Dort wird das Objekt in Namensliste gespeichert und rofl.html mit der Namensliste darin aufgerufen.

Ich weiß, dass hier wahrscheinlich viele Grundlagenfehler drin sind, aber ich habe wirklich ewig lang gegooglet und finde einfach nicht, wie man es richtig macht.

Danke schon einmal für jede Idee.

...zur Frage

fivem Access denied for doors:make?

ich benutze das script Doors-Pack-jub9sy um türen zu erstellen aber jedes mal wen ich den befehl eingebe kommt Acess denied for command doors:make

...zur Frage

Javascript Fetch API - Wie kann ich den Output als Variable weiterbearbeiten?

Ich hole mir in einer scoreboard.php Datei eine Liste mit Werten aus meiner MySQL Datenbank. Wie kann ich diese PHP Datei aus einem Script heraus aufrufen und die zurückgegebenen Werte weiter verarbeiten? Ich bin soweit, dass ich die Werte zwar mit console.log() ausgeben kann, jedoch hilft mir das nicht, da ich sie nicht ausgeben möchte sondern noch weiter verarbeiten.

var results;
fetch("includes/scoreboard.php")
  .then(res => res.text())
  .then(data => results = data);
  .then(() => console.log(results))

Wie bekomme ich die Ausgabe einer externen PHP Datei in eine JS Variable?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen