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?

2 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

freejack75

03.01.2020, 07:48

das ist keine Datei, sondern eine Header-Zeile. Die musst Du in der Implementierung von Deiner API mit ausgeben. Wie hängt von der Server-Implementierung ab, dazu hast Du nichts geschrieben.

guschteusz

Fragesteller

03.01.2020, 07:57

ASP.NET ist der server bzw die api

freejack75

03.01.2020, 08:03

@guschteusz

da hat das Response-Objekt eine Headers-Collection -- da kannst Du dann mit Add(...) im Programmcode den CORS-Header mit einbauen.

Steffile

03.01.2020, 07:49

ich habe das aucjh manchmal mit schlechtkonfigurierten Servern und schreibe dann in die php datei

header("Access-Control-Allow-Origin: http://www.website.com");

oder bei localhost waere das

header("Access-Control-Allow-Origin: *");

Hallo zusammen, seit kurzem bekomme ich diesen Fehler...

Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf https://open.spotify.com/playlist/3RKBgf

(Grund: CORS-Kopfzeile 'Access-Control-Allow-Origin' fehlt). Statuscode: 200.

Weitere Infos

...wenn ich auf einen Link auf meiner Homepage klicke. Ich bin mir nicht sicher, ob ich das Problem richtig verstanden habe. Ist es so, dass Spotify verhindert, dass der Link quasi über Umwege (beispielsweise über eine Verlinkung eines images) aufgerufen werden kann? Wenn dem so ist, habe ich dann eine Chance den Link trotzdem auf meiner Homepage einzubinden? Oder missverstehe ich die Fehlermeldung vielleicht auch? Vor einigen Tagen hat der Link noch funktioniert, aber seit dem habe ich auch schon wieder viel an der Homepage geschraubt, ohne nun im Detail zu wissen, ab wann es nicht mehr funktioniert hat.

Mein Link sieht wie folgt aus:

<nav class="navbar navbar-expand-lg navbar-dark">
  <div class="d-flex align-items-center">
    <a href="https://open.spotify.com/playlist/3RKBgfISwD(...)" style="margin-right: 15px;"><img height="35px" width="35px" src="img/spotify-icon.png" alt="spotify" id="spotify_logo">
    </a>
   </div>  
(...)
</nav>

Ich wäre euch sehr dankbar, wenn ihr mir helfen könntet.

...zur Frage

JavaScript: 'Access-Control-Allow-Origin' Header setzen?

Hallo,

ich mache gerade eine Webseite für einen Server und arbeite mit APIs. Folgenden Code habe ich geschrieben um die Personenanzahl der aktuellen Online-Spieler auf Discord zu erhalten:

var discord = {
  async: true,
  crossDomain: true,
  url: "https://discordapp.com/api/guilds/710483657571172463/widget.json",
  method: "GET",
  processData: false,
  data: ""
};

$.ajax(discord).done(function (response) {
  document.getElementById("online").innerHTML = response.presence_count;
});

Dieser hat auch bereits schon lokal funktioniert, aber seitdem ich ihn auf dem Server habe und die Website öffne, kommt in der Konsole ein Fehler:

Access to XMLHttpRequest at ' https://discordapp.com/api/guilds/710483657571172463/widget.json' from origin ' https://gamingrunde.tk' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Ich wollte wissen, wo und wie ich den Header im Code setze.

...zur Frage

CORS header 'AccessGrund: CORS-Kopfzeile 'Access-Control-Allow-Origin' fehlt?

Hey,

ich hoste ein .onion-Seite.

Nun habe ich eine Seite erstellt, wo man seine Adresse und so eingeben soll. Diese Daten sollen natürlich zu einer Datenbank.

Als alles fertig war, habe ich es einmal ausprobiert und dann kam der Fehler in der Console:

CORS header 'AccessGrund: CORS-Kopfzeile 'Access-Control-Allow-Origin' fehlt.

Ich habe es auch mit einer normalen Webseite probiert. Dort geht es.

Also ist jetzt meine Frage: Wie behebt man das Problem (läuft alles über nginx)?

MfG

...zur Frage

AJAX: Webseite URL angeben?

Hallo,

ich möchte per AJAX eine Datei, die auf einem Webserver liegt, überprüfen. Wie kann ich die URL richtig angeben?

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("test").innerHTML = this.responseText;
  }
};
xhttp.open("GET", "http://test.test/test.php", true);
xhttp.send();

Wenn ich das so angebe, wie im Beispiel als test.test/test.php, funktioniert bei mir nichts.

Wenn ich jedoch die test.php auf dem gleichen Server wie den Request habe, die Datei dann als test.php angebe, funktioniert alles.

Wie kann ich eine Url angeben, sodass es funktioniert?

Edit: Fehlermeldung:

[Error] Origin http://localhost is not allowed by Access-Control-Allow-Origin.
[Error] XMLHttpRequest cannot load https://test.test.test/test.php due to access control checks.
[Error] Failed to load resource: Origin http://localhost is not allowed by Access-Control-Allow-Origin. (test.php, line 0)

...zur Frage

Wie kann ich via Access-Control-Allow-Origin zwei Domains erlauben?

Hallo, wie sieht der .htccass-Eintrag aus, um zwei Domains zu erlauben? Ich kann mit dem Code unten nur alle aktivieren. Wenn ich statt * die Adresse eingebe, geht es nicht.

<IfModule mod_headers.c>
  Header set Access-Control-Allow-Origin "*"
</IfModule>

...zur Frage

VueJS 3: Wie kann ich To-Do's in einer Datei speichern?

Hallo,

ich habe eine Frage.

Momentan programmiere ich eine To-Do-App mit Vue.js 3, JavaScript, HTML und CSS. Bis jetzt funktioniert alles, ich kann neue To-Dos erstellen, bearbeiten und löschen. Aktuell sind alle To-Dos im LocalStorage gespeichert, aber ich möchte sie lieber in einer Datei speichern.

Ich bin noch neu in den genannten Programmiersprachen. Trotzdem könnte ich mir vorstellen, dass ich eine Datei erstellen muss, z.B. todos.json, in der die neuen To-Do's gespeichert werden. Ich stelle mir vor, dass es etwa so in der todos.json-Datei aussehen könnte:

{
  id: 1,
  label: "todo1",
  highPriority: false,
  finished: true,
  editing: false
},
{
  id: 2,
  label: "todo2",
  highPriority: true,
  finished: true,
  editing: false
},

Um auf den Punkt zu kommen: Ich benötige Hilfe dabei, wie ich dies umsetzen muss, da ich momentan nicht weiß, was ich tun soll.

Am Ende soll natürlich auch die Applikation aus der Datei die verschiedenen To-Do's herauslesen können und diese dann in der <li>-Liste anzeigen können.

...zur Frage

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

Emits in Vue sind das Gegenteil von Props?

Ich lerne gerade das Javascript Framework Vue.js und hab die zwei Konzepte Emits und Props gelernt, weiß nur nicht ob ich das richtig verstanden hab.

Hab das so verstanden das Props, Informationen sind die vom Parent Component zum Child Component übergeben werden und das Emits Informationen vom Child Component zum Parent Component übergeben.

Sozusagen ist Emit das gegenstück zum Prop ?

...zur Frage

Welche Sicherheitsvorkehrugen bei der Webentwicklung (z. B. beim Login)?

HI. Wie kann man sich am besten vor Hacker-Angriffen bzw. allgemein Hacking von Konten in der Webentwicklung (nutze da Vue,js. Socket.io, Node,js etc.) schützen? Also mit einem Token ist klar etc. Aber welche gibt es noch? Danke für eure Antworten :)

...zur Frage

Wie lasse ich eine App über einen DNS Server auf Domaine hosten (Webentwicklung)?

Ich nutze Strato und möchte meine kleine Webapp per DNS Server hosten. Allerdings braucht man ja eine Connections zu dem Server, allerdings weiß ich nicht wie das geht. Bisher läuft die App über die IP eines Routers (nicht mehr aufgrund Sicherheitsgründen, war nur zum testen), allerdings möchte ich es so machen, dass sie Public ist und unter einer Domine erreichbar ist. Bitte helft mir, danke

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

php gibt ganzen HTML Text statt nur JSON zurück?

Hallo habe ein kleines php Skript geschrieben und habe im Skript ein Array was ich mit json_encode zu json formatiere, allerdings gibt mir php den kompletten HTML Code zurück und nicht nur den JSON Teil.

Hab im Netz gefunden das dieser header Teil im ersten Bild hinzugefügt werden muss, leider klappt es trotzdem nicht.

Mit:

header("Access-Control-Allow-Origin: *");

klappt es leider auch nicht, die beiden kombiniert auch nicht xD.

Jemand eine Idee?

Danke im Voraus 🐘

...zur Frage

React Fullstack mit welchem Backend?

Ich wollte NextJS lernen Fullstack React Framework aber ich stelle mir die Frage, mit was genau man das Ganze verwendet. In fast jedem YouTube-Video wird "Prisma" (davor noch nie gehört) mit einer anderen Datenbank genutzt, was das alles noch schwieriger macht.

Es gibt PostgreSQL, MongoDB, SQLite, usw..

Ich kenne normales SQL in Kombination mit PHP, aber die neuen modernen Sachen kenne ich nicht.

React und PHP harmonieren nicht so gut, es gibt auch wenig Online-Ressourcen und ich sehe da keine Zukunft für Stellenausschreibungen, weshalb ich diese Kombination gar nicht mehr nutzen will und backendseitig lieber von neu anfangen möchte. NextJS wäre bequem, da ich keine Router brauche, SSR habe, TS + Tailwind-Support.

Kann mir ein Fullstack-Entwickler von euch eine Roadmap empfehlen?

NextJS mit was als Datenbank, MERN-Stack vielleicht oder irgendwas anderes?

Ich bin bereit in Zukunft mehr zu lernen, aber erstmal einen Allrounder, in dem ich mein Wissen vertiefen kann.

...zur Frage

Input löschen Vue.js?

Hallo

Ich bin gerade mit Vue js eine To-Do-App am programmieren. Es gibt ein Input feld in dem man den Namen des To-Do's schreiben kann, danach kann man noch die Kategorie wählen z.B. Arbeit oder Privat. Alles funktioniert jedoch möchte ich gerne das nach dem ich den "Add to Board"/Submit Buttom drücke der Text aus dem Input Feld gelöscht wird.

Ich bin ein Anfänger was das Programmieren angeht und würde mich über Hilfe freuen.

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen