静的APIのJSONファイルの置き方について

一か月ほど前にプログラミング？JavaScriptに興味を持ち出した素人なので、どのように質問したら良いかもわからないのですが、よろしくお願いします<(_ _)>

JavaScriptを使ってボタンを押すと外部のAPIのデータにアクセスしてJSONデータの内容を引っ張ってくるということに挑戦しています。

プログラマーの方々が公開されているAPIにアクセスしてJSONデータを取得することはできるのですが、自分が使っているエックスサーバーにFTPでJSONデータを保存して、そこからデータを引っ張ってこようとすると動かなくなります。

ブラウザから自分のJSONを置いたURLにアクセスすると、ブラウザにはちゃんとJSONのデータが表示されます。
PostmanにURLを入力してGETを送信すると、bodyにJSONのデータが表示されてます。Headerの部分を見てみるとStatusなどの項目がないのですが、何か関係しているのでしょうか？右上のバーの部分にはstatus: 200okと表示されています。
無事にJSONデータにアクセスするためには、どのような作業が必要なのでしょうか？よろしくお願いします。

PostmanのHeadersに書かれている情報

accept-ranges →bytes
connection →keep-alive
content-length →285
content-type →application/json
date →Thu, 22 Mar 2018 05:40:37 GMT
etag →"11d-567f862485768"
last-modified →Thu, 22 Mar 2018 04:03:02 GMT
server →nginx
x-cache-status →BYPASS
x-original-date →Thu, 22 Mar 2018 05:40:37 GMT
x-ua-device →pc

具体的にはこのようなコードで郵便番号から住所のjsonデータを取りに行って、データがあれば次の動作に移っていくようにしています。

javascript
1
2      //API URL
3      var addressForPostalApi = "自分のURL" + postalCode1 + "/" + postalCode2 + ".json";
4
5      //json get data
6      var postalCodeData = new XMLHttpRequest();
7      postalCodeData.open('GET', addressForPostalApi);
8
9      //JSON parce
10      postalCodeData.onload = function() {
11      thisispostcodedata = JSON.parse(postalCodeData.responseText);
12

コンソールログ
Failed to load http://自分のURL/001/0011.json: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:3000' is therefore not allowed access.
VM326:1 XHR failed loading: GET "http://自分のURL/001/0011.json".
(anonymous) @ VM326:1
ooo @ address.html:138

y_waiwai

2018/03/22 06:04

どうやって引っ張ってこようとしてますか？

DarthVader

2018/03/22 07:31

ありがとうございます。JavaScriptを貼り付けてみました。

行動規範の内容に同意します

回答1件

ベストアンサー

JSONを配置したサーバとは異なるドメインからAjaxリクエストしているのでしょうか？
それであればAccess-Control-Allow-Originヘッダが設定されていない事が原因かもしれません。
https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

動作しなかった際のブラウザのコンソールログを貼り付けて頂けるともう少し詳しくわかるかと思います。
主要ブラウザでのコンソール表示方法は以下の通りです。