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?

Bild zum Beitrag

1 Antwort

thomaszZz, Software Engineer bei gutefrage

01.03.2023, 10:12

CORS ist in erster Linie eine Sicherung des Clients (also des Browsers) gegen Zugriffe auf fremde Server. Es soll verhindern, dass böswillige Webseiten die Browsernutzer dazu verwenden, Requests gegen fremde Seiten zu richten.

Die CORS-Richtlinien werden vom Server festgelegt, soweit richtig. Es gibt zwei Möglichkeiten, diese zu umgehen:

Du erstellst dir einen kleinen Proxy (ein einfacher Server), der die Seiten abruft und CORS-Anweisungen ignoriert und dann eine API für dein eigenes Script ohne Einschränkungen zur Verfügung stellt.
Du startest deinen Browser in einem in einem Modus, der die CORS-Anweisungen ignoriert. Das geht bei Chrome so.

Letztere Variante bringt allerdings Sicherheitsprobleme mit sich, weswegen sie lediglich zum Testen geeignet ist.

Woher ich das weiß:Berufserfahrung – Software Engineer seit 2015, u.a. Telefónica und gutefrage

Ähnliche Fragen

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.

...zur Frage

JavaScript/DOM lokale Datei auslesen?

Hay, ist es möglich mittels js auf einer html Seite eine txt auszulesen und in ein Div zu packen? Ich habe es mit Fetch versucht da kommt aber nur das er die Datei nicht findet.

...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

Warum gibt es nichts anderes als JavaScript im Browser Frontend?

Es gibt Dart-Flutter, C#-Blazor soweit ich weiß, aber ich nehme an, es ist nur JavaScript unter der Haube.

Ähnlich wie, wenn man React Native Code schreibt, wird es in die native mobile Sprache umgewandelt => Kotlin, Swift etc..

Weil soweit ich weiß, versteht der Browser nichts anderes als HTML, CSS und JavaScript.

Es gibt da nur die V8-Engine / andere JavaScript-Engines.

Aber warum?

Wieso ist es nicht theoretisch möglich, einfach mit einer neuen Sprache die für cross platform entwickelt wurde, einen onclick-Event Listener zu nutzen?

In einer ganz eigenen Engine.

Heißt nicht, das sie JavaScript irgendetwas die nächsten 5 Jahre streitig machen könnte, aber wenn diese Sprache direkt Typisierung unterstützen würde, ohne TypeScript und auch noch für andere Dinge besser geeignet wäre als JavaScript (wurde halt nicht dafür designed, ganz egal ob Electron, Native existiert) wie Desktopanwendungen, Mobil, etc..

PHP nehme ich erst garnicht auf, das macht alleine gar nichts im Frontend, ist eine Backendsprache und alleine sinnlos auf Websites, bis auf bisschen HTML generieren, das auch nur vom Server kommt.

Klar, wenn du ewig lange Weiterleitungen willst, die furchtbar sind und überhaupt nicht interaktive Websites, dich auf Formulare beschränkst, dann kriegst du das auch ohne JavaScript hin, etwas Schreckliches zu programmieren.

Mit WebAssembly kenne ich mich gar nicht aus. Ob da Event Listener, usw. möglich sind. Aber alleine von der Einstiegshürde und Komplexität die ich höre, ist das keine Alternative.

Assembly ist auch keine Alternative zu C++. Dafür gibt es Rust.

...zur Frage

JSON-Datei Inhalt in HTML Anzeigen?

Hallo Zusammen,

meine Webseite holt sich mit request genauer gesagt mit fetch-node eine JSON Datei von einem Server, soweit funktioniert das auch.

Nun weiß ich nicht genau wie kann ich nun den Inhalt aufteilen z.b. in Name, Titel, Beschreibung und diesen Grafisch in HTML darstellen ?

...zur Frage

HTML Kommentarfeld programmieren

Also habe mir mittlerweile HTML bzw. CSS relativ gut beigebracht kann auch schon die wichtigsten dinge programmieren. Darum hab ich für die SMV meiner Schule eine Webseite erstellt soweit so gut eig. ist alles fertig allerdings wollte ich noch einen link einbauen zu einer seite auf der sie kommentare mit Namen(dabei soll der Namen von ihnen selbst festgelegt werden können) "posten" können, würde die Seite auch selbst erstellen das Problem liegt allerdings bei den Kommentarfeldern weil ich einfach nicht weiß wie ich das programmieren soll. Beherrsche zwar auch ein wenig JavaScript aber mir ist einfach komplett unklar wie ich das bewerkstelligen soll. Wäre nett wenn ihr mir einen Beispielcode geben könntet möglichst mit (kurzer) Erklärung. Ich entschuldige mich jetzt schon für Fehler im Text. Hoffe ihr könnt mir helfen

P.S.: Ja, ich weiß was eine Suchmaschine ist aber da kamen nur diese komischen HTML Baukästen.

...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

HTML/Javascript Wert speichern ohne Server?

Sagen wir mal meine Aufgabe ist es eine Webseite zu erstellen mit einem Counter, drückt man drauf zählt er hoch. 0->1->2->3>-4>-5->...

Der Wert soll aber gespeichert werden, wenn die nächste Person diese Seite aufruft, soll der Counter nicht wieder bei 0 anfangen, sondern da wo die anderen Personen aufgehört haben.

Das Problem: ich darf NUR HTML, CSS und Javascript benutzen.

Geht das überhaupt ohne PHP, Datenbank oder ähnlichem?

Ich hab gelesen es gibt Local Storage von HTML5 und es gibt Cookies, aber die sind nur für den Benutzer lokal und bringt mir nichts, soweit ich das verstanden habe.

Könnte ich irgendwie die Werte in einer Text Datei speichern und die Text Datei mit HTML oder Javascript wieder auslesen?

...zur Frage

Website lädt automatisch neu?

Heute habe ich eine neue Website gemacht, es ist eine Todo Liste, einfach damit ich ein bisschen javascript üben kann. Soweit funktioniert auch alles doch sobald ich Sachen in den input eingebe und dann auf Hinzufügen drücke lädt die seite neu. Wieso?

Hier der js code

Und hier der HTML code

...zur Frage

Dynamisches Inhaltsverzeichnis HTML/JavaScript?

Hallo liebe Community,

ich bin gerade dabei ein Word-Dokument in HTML Code zu konvertieren. Soweit passt alles, jedoch hab ich etwas Probleme beim Inhaltsverzeichnis (siehe Bild).

Mein Wunsch wäre es das Inhaltsverzeichnis dynamisch zu gestalten, doch ich hab leider keine Ahnung wie. Ich kenne mich mit JavaScript zu wenig aus um zu sagen, ob dies hiermit möglich ist.
Außerdem stellt sich mir dir Frage, wie ich die Punkte neben der Namen des Inhaltsverzeichnisses immer bis zum Seitenende füllen kann, da sich die Überschriften von der Länge auch variieren können.

Vielleicht hat aber auch jemand eine Idee, wie ich das gesamte Inhaltsverzeichnis so realisieren kann.

Danke!

...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

HTML/CSS/JAVASCRIPT Taschenrechner Fehler beheben?

ich programmiere grade einen Taschenrechner mithilfe von Javascript, habe auch alles soweit richtig hinbekommen. nur wenn ich einen buchstaben eingebe zeigt mit der browser(in diesem fall t): Uncaught ReferenceError: t is not defined

welche funktion muss ich noch hinzufügen das einfach gar nichts bei einem buchstaben passiert aber auch keine fehlermeldung kommt?

danke

https://hastebin.com/nutoquduca.html

...zur Frage

JavaScript "window is not defined"?

Ich möchte dieses Beispiel hier in meine Next.js (React) App übernehmen:

https://codesandbox.io/s/knhlr?file=/src/index.tsx:0-691

Dazu mein Next.js (React) Code, der eine weiße Seite wiedergibt und in der console schreibt: "window is not defined"

"use client";

import ReactGlobe from "react-globe";

import markers from "./markers";
import markerRenderer from "./markerRenderer";

const options = {
    markerRenderer,
};

export default function App() {
    return (
        <div className="App">
            <ReactGlobe
                height="100vh"
                globeTexture="https://raw.githubusercontent.com/chrisrzhou/react-globe/main/textures/globe_dark.jpg"
                markers={markers}
                width="100vw"
                options={options}
            />
        </div>
    );
}

...zur Frage

In HTML/Javascript Taschenrechner-Element Löschen Taste einbauen?

Moin zusammen,

Ich muss für meine Ausbildung mithilfe von HTML und Javascript einen Taschenrechner samt Funktionen bauen. Ich bin soweit auch mit allem fertig nur weiß ich nicht wie ich einer Taste die Funktion onclick zuweisen kann, dass ein Element im Result Area gelöscht wird. Ich kann lediglich alle angehängten Elemente im result area löschen. Gibt es hierfür eine vordefinierte Funktion? Hoffe es ist einigermaßen verständlich formuliert. Z.B. steht im Ergebnisfeld: "4+48" und nun möchte man nur die "8" weglöschen und nicht alles. Vielen dank!

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen