CodingTrain / CodingTrain/Intro-to-Data-APIs-JS

1.1 fetch: Same Origin Policy problem

Offen
#43 2 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
HTML
Sterne
759
Forks
592
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

Just starting! And already hitting a minor roadblock. Both the code I wrote and the [code from Github](https://github.com/CodingTrain/Intro-to-Data-APIs-JS/blob/source/module1/01_fetch_image/index.html) lead to an error in my browser when it tries to fetch the image:

> Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///home/bbausch/js-working-with-data/1.1-fetch/rainbow.jpg

This is Firefox 68 on Xubuntu. I solved the problem by hosting the picture on a web server (the node.js/express.js web server from video 2.1 :)), but I wonder why I am the only one with this problem?

**EDIT**: Dan uses live-server, and on its [web site](https://www.npmjs.com/package/live-server), I read

> AJAX requests don't work with the file:// protocol due to security restrictions, i.e. you need a server if your site fetches content through JavaScript.

So I feel validated! But my question remains - is everybody using live-server or are there other methods to get around cross-origin problems?

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Rechercherichtung

Start with the linked 1.1 fetch example and the reported Firefox file:// error, then compare it with the live-server and Node.js/Express approaches mentioned in the issue. Done means documenting the supported way to run the example and explaining the relevant browser restriction and alternatives.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
express, javascript, node.js
Bereich
web-dev
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Muss geklärt werden
Anfängerfreundlichkeit
25/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.