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

1.1 fetch: Same Origin Policy problem

Open
#43 2 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.