search

CodingTrain / Intro-to-Data-APIs-JS

Working with Data and APIs in JavaScript
MIT License
754 stars 610 forks source link

1.1 fetch: Same Origin Policy problem #43

Open berndbausch opened 5 years ago

berndbausch commented 5 years ago

Just starting! And already hitting a minor roadblock. Both the code I wrote and the code from Github 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, 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?

tamtoronto commented 4 years ago

Anyone solve this problem?

anuraghazra commented 4 years ago

Not necessarily live-server, but you need a server/localserver to do AJAX requests.. otherwise it will throw. It is easy to work with live-server, but there are other alternatives too, like http-server https://github.com/http-party/http-server