CodingTrain / CodingTrain/Intro-to-Data-APIs-JS
1.1 fetch: Same Origin Policy problem
- Dominant language
- HTML
- Stars
- 759
- Forks
- 592
- PR merge metrics
- No merged PRs in 30d
Description
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?
Contributor guide
No contributing guide indexed for this repository
Research direction
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.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- express, javascript, node.js
- Domain
- web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100