月別アーカイブ: 2016年11月

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」

【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
だったりしたら
https://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 画像のようにシェを入力後、

下記のコードをコピペ

[code]
open -a Google\ Chrome --args -allow-file-access-from-files
[/code]

画像のところに、

【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 それでも同じエラーでるようだったら

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

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

https://からリクエスト
もしくは
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

NPM

【json-server-watch db.json】エラーError「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」

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らしいです。
ドキュメント
のでそれを変更。
[code language="javascript"]
var browser = require("browser-sync");
gulp.task("server",function(){
browser({
server:{
baseDir: "./"
},
url: {
port: 3001
},
port: 8080
});
});
[/code]

もう一回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」

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

でわーーーー

web備忘録, 参照記事

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

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

・jflute : https://d.hatena.ne.jp/jflute/20160330/fragramming

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

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

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

chromeExtensions

【Chrome/Instagram】選択した文字列をInstagram検索して表示させる拡張機能作った

【Chrome/Instagram】選択した文字列をInstagram検索して表示させる拡張機能作った

【Chrome/Instagram】選択した文字列をInstagram検索して表示させる拡張機能作った
【Chrome/Instagram】選択した文字列をInstagram検索して表示させる拡張機能作った

拡張機能を作りたくて初心者丸出しのExtension作りました。

google画像検索だとなんか変なの混ざったり、メニューがわからないお店のリアルな写真はInstagramの方が参考になると思い。
%e3%83%a9%e3%83%bc%e3%83%a1%e3%83%b3%e4%ba%8c%e9%83%8e

１.任意のテキストを選択(beforecopy)
2.右クリック
3.コンテキストメニューの「〜をInstagramで検索」を押下
4.Instagram検索され新しいタブで結果が開かれる。

今週末までにここにex7としてマージする予定。

もうちょっと実用的なもの作りたい。。

でわーーーーー

chromeExtensions

【Chrome extenstions/拡張機能】 デバッグ方法 How to debug a page_action that has been created on background scripts

【chrome extenstions/拡張機能】 デバッグ方法 How to debug a page_action that has been created on background scripts

ポップアップの場合「右クリック」→「要素の検証」ができますが、

pageActionで作られたデバッグはどのようにすればいいのでしょう。

【chrome extenstions拡張機能】 デバッグ方法 background scripts chrome extension debugger
【chrome extenstions拡張機能】 デバッグ方法 background scripts chrome extension debugger

こちらが答え

【chrome extenstions/拡張機能】 デバッグ方法 How to debug a page_action that has been created on background scripts
【chrome extenstions/拡張機能】 デバッグ方法 How to debug a page_action that has been created on background scripts

It was the only difficult to find
みつけづらいだけでした。

でわーーーー