カテゴリー別アーカイブ: web備忘録

普段はwebのほうの仕事も多いのでそちらのお勉強の際のちょっとしたメモ書きです。

【Chrome/Ajax,Promise/ローカルサーバー】これが出たらやる9つのこと「XMLHttpRequest cannot load localhost:3000/sub/comments. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource」

こちらの画像の通り、

【Ajax/Promise】やっぱ?だめ??を解決「XMLHttpRequest cannot load localhost:3000/sub/comments. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource」

【Ajax/Promise】やっぱ?だめ??を解決「XMLHttpRequest cannot load localhost:3000/sub/comments. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource」

ローカルのJSONにアクセスしようとしたらエラー。
やること

まずリクエストかけているurlを確かめて
もし
localhost:3000/comments
だったりしたら
http://localhost:3000/comments
でやってみてください。(フォルダパスも確認)
それでもダメだったら以下。

1 Automaterを立ち上げる。(shift+cmd+aで行った先にあるよ)

【Chrome/Ajax/ローカルサーバー】これが出たらやる9つのこと「XMLHttpRequest cannot load localhost:3000/sub/comments. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource」

【Chrome/Ajax/ローカルサーバー】これが出たらやる9つのこと「XMLHttpRequest cannot load localhost:3000/sub/comments. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource」

2 画像のようにシェを入力後、

下記のコードをコピペ

open -a Google\ Chrome --args -allow-file-access-from-files

画像のところに、

【Chrome/Ajax/ローカルサーバー】これが出たらやる9つのこと「XMLHttpRequest cannot load localhost:3000/sub/comments. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource」

【Chrome/Ajax/ローカルサーバー】これが出たらやる9つのこと「XMLHttpRequest cannot load localhost:3000/sub/comments. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource」

3 設定変えたからアクセスできる権限を与えといてね。(ここら辺は進んでいけば聞かれるはずだし、設定済みなら不要)

【Chrome/Ajax/ローカルサーバー】これが出たらやる9つのこと「XMLHttpRequest cannot load localhost:3000/sub/comments. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource」

【Chrome/Ajax/ローカルサーバー】これが出たらやる9つのこと「XMLHttpRequest cannot load localhost:3000/sub/comments. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource」

4 ぽちぽち押す

【Chrome/Ajax/ローカルサーバー】これが出たらやる9つのこと「XMLHttpRequest cannot load localhost:3000/sub/comments. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource」

【Chrome/Ajax/ローカルサーバー】これが出たらやる9つのこと「XMLHttpRequest cannot load localhost:3000/sub/comments. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource」

5 聞かれたら適当な名前つける

【Chrome/Ajax/ローカルサーバー】これが出たらやる9つのこと「XMLHttpRequest cannot load localhost:3000/sub/comments. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource」

【Chrome/Ajax/ローカルサーバー】これが出たらやる9つのこと「XMLHttpRequest cannot load localhost:3000/sub/comments. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource」

6  PC再起動、ローカルサーバーを立ち上げ直してもう一回ページ遷移してみて


gulpとかnpm startとか

7 もしChromeに何か聞かれたらパスワードで入力して立ち上げて

【Chrome/Ajax/ローカルサーバー】これが出たらやる9つのこと「XMLHttpRequest cannot load localhost:3000/sub/comments. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource」

【Chrome/Ajax/ローカルサーバー】これが出たらやる9つのこと「XMLHttpRequest cannot load localhost:3000/sub/comments. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource」

8 それでも同じエラーでるようだったら

http://stackoverflow.com/questions/27742070/angularjs-error-cross-origin-requests-are-only-supported-for-protocol-schemes(英語記事)

ここでは
localhost:3000/comments
なっている箇所を
http://localhost:3000/comments

http://からリクエスト
もしくは
filename確認。
とか言っている。(わたしはこれが原因でした)

9
いけた。

【Chrome/Ajax/ローカルサーバー】これが出たらやる9つのこと「XMLHttpRequest cannot load localhost:3000/sub/comments. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource」

【Chrome/Ajax/ローカルサーバー】これが出たらやる9つのこと「XMLHttpRequest cannot load localhost:3000/sub/comments. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource」

いかがでしたでしょうか?

解決されましたら幸いです。

実は自分は芸人をしています。もしよろしかったらこちらの記事も読んでいただけると幸いです

 

【関連記事】
【React】Reactの動きを理解したい人の為の最小サンプル

【React入門】過去のREACT初心者の自分にpropsとstateの違いを簡単に説明してあげたい

【React × ECMAScript2015 × Flux】を手っ取り早く学びたい人の為にサンプル作ったよ【3の倍数と3が付くときだけ猫になるカウンター】

React × Flux × ECMAScript2015 LINE風チャット

他のReact記事

フロントエンド記事

GitHub

qiita

【json-server-watch db.json】エラー「events.js:154 throw er; // Unhandled ‘error’ event ^Error: listen EADDRINUSE 0.0.0.0:3000」

json-serverでwatchしたらこのようなエラーがでてDHCで404などが帰ってくる場合。
下のようにエラーでる。

【json-server-watch db.json】エラー「events.js:154 throw er; // Unhandled 'error' event ^Error: listen EADDRINUSE 0.0.0.0:3000」

【json-server-watch db.json】エラー「events.js:154 throw er; // Unhandled ‘error’ event ^Error: listen EADDRINUSE 0.0.0.0:3000」

他に同じportでlocalサーバー立てていないか確認してください。

gulpやなんやらでbrowser-snycでlocal:3000をすでに使っているのに、
json-serverでlocal:3000にアクセスしているけーすがあります。

brower-snycの方の設定を変えてしまいましょう。
下記は1例です
browser-snycはデフォルト3000らしいです。
ドキュメント
のでそれを変更。

var browser = require("browser-sync");
gulp.task("server",function(){
	browser({
		server:{
			baseDir: "./"
		},
		url: {
			port: 3001
		},
		port: 8080
	});
});

もう一回gulpもjson-serverも立ち上げて、

【json-server-watch db.json】エラー「events.js:154 throw er; // Unhandled 'error' event ^Error: listen EADDRINUSE 0.0.0.0:3000」

【json-server-watch db.json】エラー「events.js:154 throw er; // Unhandled ‘error’ event ^Error: listen EADDRINUSE 0.0.0.0:3000」

DHCも

【json-server-watch db.json】エラー「events.js:154 throw er; // Unhandled 'error' event ^Error: listen EADDRINUSE 0.0.0.0:3000」

【json-server-watch db.json】エラー「events.js:154 throw er; // Unhandled ‘error’ event ^Error: listen EADDRINUSE 0.0.0.0:3000」

無事リクエストが返ってきました。

でわーーーー

わたしもみている | 破片プログラマーの悲しみ | Promiseは常に非同期?

jflute : http://d.hatena.ne.jp/jflute/20160330/fragramming

2.3.コラム: Promiseは常に非同期?

Promiseとasync-awaitの例外処理を完全に理解しよう

document.implementation
他の「わたしもみてる記事」