JsonファイルをJavascriptでインポートできない

Question

JavaScriptの入門書を見ながら、トライしています。

Jsonファイルのインポートができずに苦労しています。

  $.ajax({url: 'http://localhost:4248/Big5.json', dataType: 'json'})
        .done(function(data){
          console.log(data);
        })
        .fail(function(){
          console.log('残念');
        })

使ったアプリServed
を使い、ローカルのjsonファイルをローカルにアップロードしてそのurlを入力しています。

[Error] Origin null is not allowed by Access-Control-Allow-Origin.
[Error] XMLHttpRequest cannot load http://localhost:4248/Big5.json due to access control checks.
[Log] 残念 (default.html, line 38)
[Error] Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin. (Big5.json, line 0)

のようにエラーがコンソールに出ております。
最初、ローカルのファイルを直接パスで指定したら無理だったので、このような形式にしました。

なぜ、httprequestを受け付けてくれないのでしょうか。

Comments

[kei344]

呼び出し側のHTMLはServed上にあって、そのURLでアクセスしていますか？

[退会済みユーザー]

多分同じServedだけどポートが異なるので、Servedのmain.jsで
serve.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
next();
});
みたいなのが必要なのだと思います。知りませんけど。

Answer 1

ポートをデフォルトの80でやってみてください
もしくは呼び出し元のhtmlを4248のポートで公開するディレクトリにおくとか
http://localhost:4248/myfile.html

Answer 2

何も指定せずに、勝手に別ドメインの値を取得することは、セキュリティ面によりできなくなっています。
typeをget指定してもできないですか？

AjaxでAccess-Control-Allow-Originのエラーを回避する方法

Comments

[masaking]

回答ありがとうございます。

サイトを参考に、

query = "url=http://localhost:4248/Big5.json";
$.get(query,function(data){
console.log(data);
});

のように記述しましたが、エラーでした。

[Error] XMLHttpRequest cannot load file:///Users/stepfstep/JS/url=http://localhost:4248/Big5.json due to access control checks.
send (jquery.min.js:2:81481)
ajax (jquery.min.js:2:77300)
グローバルコード (default.html:22)

パスが、fileのままなのが一番解せないです。
headに、jQueryのソースパスは書いてます。

[FKM]

$.ajax( type="get",…)の形でも駄目でしょうか？$.get(…)は色々と制約かかりますので