Fehler beim Abrufen von XMLHttpRequest();

[PlatinSecurity]

Hallo zusammen,

ich bin neu hier und hoffe ich bin hier im richtigen Thema.
Ich wollte mit einem einfachen XMLHttpRequest(); meine Webseite etwas fragen und auf Antwort warten.

Diese Anfrage sende ich über eine Lokale .html Datei. Diese Datei hat einfachen HTML und Javascript Code.
Alles weiter funktioniert auch einwandfrei. Doch wenn ich nun mal diese Abfrage mache, dann kommt aktuell dieser Fehler in der Console
(das passiert bei "

http.send();

"):

Access to XMLHttpRequest at 'https://www.example.net/file.php?id=emotesv2_890e58f84437405db6ee85f72708a0ea&s=<query_string>' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Wie verhindre ich diesen Fehler?
EDIT: Ich habe es gerade mal auf meinen Webserver geladen. Dort wird auch ein Fehler ausgegeben. Nur das der Teil mit "from origin 'null' has been blocked" jetzt "from origin 'https://www.example.net' has been blocked" ist.

Lg

 

[basti1012]

Du machst den Request sicherlich auf einen Fremdserver, oder ?
Google mal den Fehler , dann brauche ich nicht versuchen das zu erklären.

Du kannst es aber mal mit der fetch API versuchen .
Das Thema hatten wir schon mal in anderen Forum mit der gleichen Fehlermeldung.

Fremde ics Daten auf eigener Homepage anzeigen

Hallo, gibt es eine Möglichkeit von einer fremden Homepage bereitgestellte ics Daten auf der eigenen Homepage abzubilden die sich dann auch

forum.jswelt.de

Wie du da siehst, hatte die fetch API mehr Glück

 

[basti1012]

Da habe ich nicht drauf geachtet. Wenn man unter Netzwerk schaut, ist aber alles da, was in der Datei steht. Ich weiß aber auch nicht, ob man bei dem ICS Format irgendwas anders machen muss, ich lese da immer was von ics Parser ?

EDIT:
Habe jetzt die ganze Zeit gegoogelt und ausprobiert , aber eine ICS Datei kriege ich überhaupt nicht ausgelesen, mit Javascript.
ICS Dateien erstellen , kein Problem ,
ICS Downloaden und in Google Kalender einlesen auch kein Problem .
ICS Downloaden und den Inhalt einfach als Text ausgeben kriege ich nicht hin . Finde aber auch nichts, wie es gehen soll.

@PlatinSecurity ,
Las dich jetzt nicht verwirren , ich glaube ICS Dateien ist eine andere Kategorie.
Du kannst es ja mal versuchen mit der fetch API. Du schreibst ja das es eine HTML-Datei ist , vielleicht solltest du dann auch die verschiedene header angaben dazu versuchen

 

[basti1012]

Wenn ich die Datei auf den eigenen Server lade ,komme ich mittlerweile an den Inhalt dran.
Aber von den Fremdserver lässt sich der Inhalt nicht auslesen , obwohl im Netzwerk alles da ist und keine weiteren Meldungen kommen.

Finde das irgendwie merkwürdig

 

[zorro]

Würdest Du Dir den Response Header anschauen, den aufgerufenen Namen der ics Datei und den erhaltenen Dateinamen, wird es Dir auffallen woran es liegt.

 

[NCM]

Access to XMLHttpRequest at 'https://www.example.net/file.php?id=emotesv2_890e58f84437405db6ee85f72708a0ea&s=<query_string>' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Wie verhindre ich diesen Fehler?

Hi, dieser Fehler tritt auf, wenn Du zum Bleistift versuchst, von einer Webseite aus mit JavaScript eine Anfrage an einen Server zu stellen, und der Server nicht die entsprechenden CORS-Header (Cross-Origin Resource Sharing) in seine Antwort einfügt.

Um den Fehler zu beheben, hast Du theoretisch mehrere Möglichkeiten:

Sofern Du den Server kontrollierst, kannst Du den entsprechenden CORS-Header in die Antwort des Servers einfügen. Dadurch kann Dein JavaScript-Code Anfragen an den Server von jedem Ursprung aus stellen.

Wenn Du den Server nicht kontrollieren solltest - also keinen Zugriff darauf hast, könntest Du alternativ einen CORS-Proxy verwenden, um die Anfrage zu stellen. Ein CORS-Proxy ist ein Server, der sich zwischen Deinen JavaScript-Code und den Zielserver setzt und die entsprechenden CORS-Header zur Serverantwort hinzufügt.
Und solltest Du eventuell Chrome verwenden, könntest Du den Browser mit dem Flag --disable-web-security starten, um die CORS-Sicherheitsfunktion zu deaktivieren. Dies wird für den Produktionseinsatz nicht empfohlen, kann aber für Testzwecke sicherlich nützlich sein. ;)
Und dann gibt es da noch unser Schmuckstück "Node.js". Solltest Du dies verwenden, könntest Du das cors-Paket verwenden, um die entsprechenden CORS-Header zur Antwort Deines Servers hinzuzufügen.

Hier ein kurzes Beispiel dafür, wie Du die entsprechenden CORS-Header in die Antwort eines Servers einfügen könntest, sofern Du Server-Inhaber bist:

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

Dieser Code verwendet die Funktion app.use des Express.js-Frameworks, um der Serverantwort für alle Anfragen die entsprechenden Header hinzuzufügen. Der Wert "*" für den Access-Control-Allow-Origin-Header erlaubt jeder Domain den Zugriff auf die Ressourcen des Servers, während der Access-Control-Allow-Headers Header angibt, welche Header in der Anfrage erlaubt sind.

Sie können im Access-Control-Allow-Origin-Header auch bestimmte Domänen angeben, wenn Sie nur bestimmten Domänen den Zugriff auf die Ressourcen Ihres Servers erlauben wollen. Zum Beispiel:

res.header("Access-Control-Allow-Origin", "https://www.example.com");

Dies würde zum Beispiel nur der Domäne https://www.example.com den Zugriff auf die Ressourcen des Servers ermöglichen.

 

[zorro]

request.type ist opaque, darauf wollte ich in #7 dezent hinweisen


Bei solchen Kisten würde ich einen Proxy vorschalten:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
 <h1>fetchSample</h1>
  <script>
   "use strict";
  let proxyUrl = 'https://api.allorigins.win/get?url='
  let myUrl = 'https://ifbb.com/events/?ical=1&tribe_display=list/ifbb-815efdd4c61.ics';
  const address = fetch(proxyUrl+myUrl)
  .then((response) => response.json())
  .then((user) => {
    let regex = /^.*base64,(.*)/gm;
    let m;
    m = regex.exec(user.contents)
    console.log(atob(m[1]))
  });
  </script>
</body>
</html>

https://jsfiddle.net/t9obdxyq/