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

1.1 fetch: Same Origin Policy problem

オープン
#43 コメント 2 件 リアクション 0 件 担当者 0 名 GitHub で見る
主要言語
HTML
スター
759
フォーク
592
PR マージ指標
30日以内にマージされた PR はありません

説明

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?

コントリビューションガイド

このリポジトリのコントリビューションガイドは索引されていません

調査の方向性

リンクされている 1.1 fetch の例と報告されている Firefox の file:// エラーから始め、その後、issue で言及されている live-server および Node.js/Express のアプローチと比較します。例を実行するためにサポートされている方法を文書化し、関連するブラウザーの制限と代替手段を説明できれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
express, javascript, node.js
領域
web-dev
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
説明が足りない
初心者へのやさしさ
25/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。