Quellübergreifende (Cross-Origin) Anfrage blockiert - was tun?

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.

2 Antworten

TheQ86

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

05.11.2023, 16:13

Ist es so, dass Spotify verhindert, dass der Link quasi über Umwege (beispielsweise über eine Verlinkung eines images) aufgerufen werden kann?

Nein, die normale Verlinkung löst in der Regel gar keinen CORS Request aus.

Anders wäre es, wenn der Browser zB. via JavaScript die Spotify-URL aufrufen will.

Wenn der Klick auf den Link bei dir einen CORS-Fehler provoziert, dann passiert im Hintergrund wahrscheinlich irgendwas in einem Script. Ansonsten würde es nämlich nur dazu führen, dass der Browser die verlinkte Seite öffnet

Wenn dem so ist, habe ich dann eine Chance den Link trotzdem auf meiner Homepage einzubinden?

Nein. Die CORS-Regeln werden serverseitig vom Zielserver gesetzt. Spotify müsste also explizit deine Domain als allowed origin setzen. Das werden sie garantiert nicht tun.

Woher ich das weiß:Berufserfahrung – Berufserfahrung

Destranix

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Programmieren & Softwareentwicklung

05.11.2023, 16:08

Nun, als Link sollte das eigentlich keinerlei Probleme machen.

Wenn du aber versuchst die Seite mittels eines Scripts aufzurufen, dann kann es Probleme geben.

Siehe auch:

https://de.wikipedia.org/wiki/Cross-Origin-Request

https://de.wikipedia.org/wiki/Cross-Origin_Resource_Sharing

Ähnliche Beiträge

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.

...zum Beitrag

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?

...zum Beitrag

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

...zum Beitrag

CSS/JS Programmieren dass Link erst klickbar wenn?

Hi, ich schreibe eine Website mit so einem Fragebogen gerade und da gibt es einen Button, der zu einer nächsten HTML Seite weiterverlinkt:

<a href="seite2.html"><div>Weiter</div></a>

Ich möchte aber, dass man erst draufklicken und zur nächsten Seite gelangen kann, wenn vorher eine Auswahl getroffen wurde, also eine Bedingung vorher erfüllt ist.

Ich weiß, dass ich das CSS steuern kann wie einen unsichtbaren Knopf erst sichtbar machen, sobald die Bedingung erfüllt ist. Aber ich hätte den "Weiter Knopf" die ganze Zeit da, nur erst klickbar, sobald die Bedingung erfüllt ist. Der Link ist aber Bestandteil vom HTML nicht vom CSS und deswegen weiß ich nicht wie das geht.

Ich hoffe mir kann jemand weiterhelfen. LG

...zum Beitrag

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?

...zum Beitrag

Warum funktioniert dieser code nicht?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beta</title>
    <script>
        const bodyElement = document.querySelector("body");

        function setColorBlue() {
            bodyElement.background-color = "blue";
        };

        function setColorRed() {
            bodyElement.background-color = "red";
        };

        function setColorGreen() {
            bodyElement.background-color = "green";
        }
    </script>
</head>
<body>
    <div class="color-picker">
        <button onclick="setColorBlue()">Blue</button>
        <button onclick="setColorRed()">Red</button>
        <button onclick="setColorGreen()">Green</button>

    </div>
</body>
</html>

...zum Beitrag

Wieso versendet dieser PHP Code die Mail nicht?

Gestern ging es noch.....

Es kommt zwar die Meldung das die Mail verschickt wurde jedoch wurde sie nicht verschickt

<?php
if(isset($_POST['submit'])) {
  $to = $_POST['to'];
  $subject = $_POST['subject'];
  $message = $_POST['message'];
  $header = "From : <//email-adresse-vom-sender>";
  if(mail($to, $subject, $message, $header)) {
    echo "Email sent successfully";
  } else {
    echo "Email failled";
  }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="container">
  <div class="form_container">
    <h3>Send Email with PHP</h3>
    <form method="post">
      <p>
        <label for="to">To:</label>
        <input type="text" name="to" placeholder="To.."/>
      </p>
      <p>
        <label for="subject">Subject:</label>
        <input type="text" name="subject" placeholder="Subject.."/>
      </p>
      <p>
        <label for="name">Message:</label>
        <input type="text" name="message" placeholder="Message.."/>
      </p>
      <button name="submit" name='submit'>Send</button>
    </form>
    </div>
    </div>
  
</body>
</html>

...zum Beitrag

Framework für laravel?

Hallo.

Erstmal ich kann noch kein framwork und kenne mich in php und einigermaßen in js aus.

Weil ich gehört habe, dass laravel ein gutes framework ist ,möchte ich es lernen.

Jetzt die Frage welches framwork am besten für das frontend in laravel ist?
Ich würde als erstes das frontend framwork lernen und dann laravel, ist das eine gute Idee?

Bitte auch mit Begründung.

Danke im voraus

Ps.: Ich nutze immer SCSS, bitte berücksichtigen.

...zum Beitrag

javascript hilfe dringendd?

Hallo zusammen!

Ich habe angefangen eine ToDoListe zu machen und bin schon fast fertig. Allerdings muss ich noch zwei Buttons fertigen und ich weiss nicht wie. Das erste Button ist "Delete All", dieser sollte alle Aufgaben (Aufgaben der ToDoListe) löschen. Das zweite ist "Change Status", dieser sollte, sofort alle Aufgaben wegstreichen oder zeigen dass diese Aufgaben gemacht worden sind. Ich hoffe auf eure Hilfen!

Bin schon richtig müde, und muss die Aufgaben schon bis morgen abschicken..

Dankeschön im Voraus!

const todoInput = document.querySelector(".todo-input");
const todoInputTwo = document.querySelector(".todo-input-two")
const todoButton = document.querySelector(".todo-button");
const todoList = document.querySelector(".todo-list");
const filterOption = document.querySelector(".filter-todo");
const deleteAllTodos = document.querySelector(".deleteAll button")


document.addEventListener("DOMContentLoaded", getLocalTodos);
todoButton.addEventListener("click", addTodo);
todoList.addEventListener("click", deleteCheck);
filterOption.addEventListener("change", filterTodo);


function addTodo(event) {
    event.preventDefault();
    const todoDiv = document.createElement("div");
    todoDiv.classList.add("todo");
    const newTodo = document.createElement("li");
    newTodo.innerText = `${todoInput.value}, Date: ${todoInputTwo.value}`; 
    newTodo.classList.add("todo-item");
    todoDiv.appendChild(newTodo);
+
    saveLocalTodos(todoInput.value);
    
    const completedButton = document.createElement("button");
    completedButton.innerHTML = '<i class="fas fa-check-circle"></li>';
    completedButton.classList.add("complete-btn");
    todoDiv.appendChild(completedButton);


    const trashButton = document.createElement("button");
    trashButton.innerHTML = '<i class="fas fa-trash"></li>';
    trashButton.classList.add("trash-btn");
    todoDiv.appendChild(trashButton);
    
    todoList.appendChild(todoDiv);
    todoInput.value = "";
}


function deleteCheck(e) {
    const item = e.target;


    if(item.classList[0] === "trash-btn") {
        const todo = item.parentElement;
        todo.classList.add("slide");


        removeLocalTodos(todo);
        todo.addEventListener("transitionend", function() {
            todo.remove();
        });
    }


    if(item.classList[0] === "complete-btn") {
        const todo = item.parentElement;
        todo.classList.toggle("completed");
    }
}


function filterTodo(e) {
    const todos = todoList.childNodes;
    todos.forEach(function(todo) {
        switch(e.target.value) {
            case "all": 
                todo.style.display = "flex";
                break;
            case "completed": 
                if(todo.classList.contains("completed")) {
                    todo.style.display = "flex";
                } else {
                    todo.style.display = "none";
                }
                break;
            case "incomplete":
                if(!todo.classList.contains("completed")) {
                    todo.style.display = "flex";
                } else {
                    todo.style.display = "none";
                }
                break;
        }
    });
}


function saveLocalTodos(todo) {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }
    todos.push(todo);
    localStorage.setItem("todos", JSON.stringify(todos));
}


function getLocalTodos() {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }
    todos.forEach(function(todo) {
        const todoDiv = document.createElement("div");
        todoDiv.classList.add("todo");
        const newTodo = document.createElement("li");
        newTodo.innerText = todo;
        newTodo.classList.add("todo-item");
        todoDiv.appendChild(newTodo);


        const completedButton = document.createElement("button");
        completedButton.innerHTML = '<i class="fas fa-check-circle"></li>';
        completedButton.classList.add("complete-btn");
        todoDiv.appendChild(completedButton);


        const trashButton = document.createElement("button");
        trashButton.innerHTML = '<i class="fas fa-trash"></li>';
        trashButton.classList.add("trash-btn");
        todoDiv.appendChild(trashButton);


        todoList.appendChild(todoDiv);
    });
}


function removeLocalTodos(todo) {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }



  deleteAllTodos.addEventListener("click", removeAllTodos);



    const todoIndex = todo.children[0].innerText;
    todos.splice(todos.indexOf(todoIndex), 1);
    localStorage.setItem("todos", JSON.stringify(todos));
}

...zum Beitrag

Wie klicke ich auf diese Elemente mit Python und Selenium?

Hallo,

Ich versuche, auf die folgenden Elemente auf dieser Webseite (https://www.bing.com/search?q=Bing+AI&showconv=1&FORM=hpcodx) mit Python und Selenium zu klicken.

//*[@id=“tone-options”]/li[3]/button

//*[@id=“camera-container”]/button

//*[@id=“camera-container”]/cib-flyout/cib-visual-search//div[3]/button[1]

Ich habe XPATH, CSS probiert.

Fehler:

selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"xpath","selector":"//*[@id="tone-options"]/li[3]/button"}

(Session info: chrome=119.0.6045.200)

Stacktrace:

GetHandleVerifier [0x00007FF7D97B82B2+55298]

(No symbol) [0x00007FF7D9725E02]

(No symbol) [0x00007FF7D95E05AB]

(No symbol) [0x00007FF7D962175C]

(No symbol) [0x00007FF7D96218DC]

(No symbol) [0x00007FF7D965CBC7]

(No symbol) [0x00007FF7D96420EF]

(No symbol) [0x00007FF7D965AAA4]

(No symbol) [0x00007FF7D9641E83]

(No symbol) [0x00007FF7D961670A]

(No symbol) [0x00007FF7D9617964]

GetHandleVerifier [0x00007FF7D9B30AAB+3694587]

GetHandleVerifier [0x00007FF7D9B8728E+4048862]

GetHandleVerifier [0x00007FF7D9B7F173+4015811]

GetHandleVerifier [0x00007FF7D98547D6+695590]

(No symbol) [0x00007FF7D9730CE8]

(No symbol) [0x00007FF7D972CF34]

(No symbol) [0x00007FF7D972D062]

(No symbol) [0x00007FF7D971D3A3]

BaseThreadInitThunk [0x00007FF8125E7344+20]

RtlUserThreadStart [0x00007FF8130026B1+33]

kann mir jemand helfen? Danke.

...zum Beitrag

Abstand in CSS/Html?

Hallo,

ich möchte Abstand zwischen diesen Wörtern nach unten machen. Wie soll ich das machen?

Hier sind meine Tags:

HTML-CODES:

<h1 class="firstheading">PEAKSOFT</h1>

<li><a class="liststyleone" href="">My courses</a></li>

<li><a class="liststyle" href="">Announcements</a></li>

<li><a class="liststyle" href="">Trash</a></li>

<li><a class="liststyle" href="">Schedule</a></li>

</ul>

</header>

CSS-CODES:

.layout {

display: flex;

justify-content: space-between;

}

.liststyle {

list-style-type: none;

}

.liststyleone {

color: rgb(31, 110, 212);;

font-weight: 600;

text-decoration: none;

font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

font-weight: 600;

}

.liststyle {

color: black;

font-weight: 600;

text-decoration: none;

font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}

Würde mich für schnelle Antworten freuen. Danke im Voraus!
LG

...zum Beitrag

Wie bei html bei bild so copyright machen?

Also ich will dass bei jedem Bild so copyright an der Seite ist und habe so ein Code gemacht aber alle copyright sachen werden an einer Stelle angezeigt und nicht bei den Bildern.

       <figure>
            <img class="cover" src="https://cdnb.artstation.com/p/assets/images/images/019/622/599/large/-3.jpg?1564323970"style="object-position: 50% 100%;">
            <figcaption class="copyright right"style="color: rgb(83, 58, 3);">
               Image by Denis Nigmatullin on artstation
            </figcaption>  
           <img style="position: absolute; left: 70%; top: 27%; width: 250px;" src="https://i.pinimg.com/originals/ca/83/ed/ca83ed22042d9846d568682d956d09bf.jpg">
           <figcaption class="copyright right"style="color: rgb(83, 58, 3);">
               Image by altantrengsingf on artstation
           </figcaption>
           <img style="position: absolute; right:91%;  top: 0%; width: 100px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Akhilleus_Patroklos_Antikensammlung_Berlin_F2278.jpg/910px-Akhilleus_Patroklos_Antikensammlung_Berlin_F2278.jpg"> 
           <figcaption class="copyright right"style="color: rgb(83, 58, 3);position: absolute; right:91%;  top: 0%;">
               Image by Bibi Saint-Pol on wikimedia
           </figcaption>  
            <img style="position: absolute; right: 91%;  top: 18%; width: 100px;" src="https://64.media.tumblr.com/55d89b8a87818f817ec8851154739637/tumblr_npwai2nq8T1tfr4rfo1_640.jpg">
            <figcaption class="copyright right"style="color: rgb(83, 58, 3);">
               Image by sheepskeleton on artstation
            </figcaption>   
           <img style="position: absolute; right: 91%;  top: 42%; width: 100px;" src="https://i.pinimg.com/564x/c6/10/5f/c6105feba2db225b5d7e52af0e427584.jpg">
           <figcaption class="copyright right"style="color: rgb(83, 58, 3);">
               Image by altantrengsingf on artstation
           </figcaption> 
        <img style="position: absolute; right: 91%;  top: 65%; width: 100px;" src="https://i.pinimg.com/736x/df/71/bc/df71bc1594556b26d9383e37ece74da5.jpg">
    </p>
    </section>

...zum Beitrag

Welchen Befehl brauche ich (HTML, CSS)?

Hallo welchen css Befehl brauche ich damit wenn ich nach unten scrolle dass der weiße Kasten hinter der Menüleiste oben ist und nicht vor?

Danke!

...zum Beitrag

Warum kann ich meinen HTML- Code nicht mit meinem Python- Code verbinden?

Hallo,

ich wollte meinen Python- Code mit meinem HTML- Code verbinden, damit, wenn mein Wake- Word "Luna" erkannt wurde, ein div in der Datei index.html seine Farbe ändert. Hier ist der Code:

Python:

from flask import Flask, render_template
from flask_socketio import SocketIO, emit

app = Flask(__name__)
app.config['SECRET_KEY'] = 'luna_secret1984773249523'
socketio = SocketIO(app)


@socketio.on('connect')
def handle_connect():
    emit('message', {'data': 'Connected'})


@socketio.on('start_listening')
def start_listening():
    if detect_wake_word():
        emit('color_change', {'color': 'red'})


@app.route('/')
def index():
    return render_template('output.html')

HTML /CSS:

... #color_div {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: green;
}    
</style>
</head>
<body>
<div id="color_div"></div>

JavaScript:

... // FLASK
        var socket = io();

        socket.on('connect', function() {
            socket.emit('start_listening');
        });

        socket.on('color_change', function(msg) {
            document.getElementById('color_div').style.backgroundColor = msg.color;
        });
</script>
</body>
</html>
    """
    with open("output.html", "w") as html_file:
        html_file.write(html_content)

    return "output.html"

Wenn ich den Code aber ausführe und "Luna" sage, ändert der Div nicht seine Farbe. Woran liegt das?

Freundliche Grüsse

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen