CORS(Cross-Origin Resource Sharing) の例です。
index.html が置かれているサーバー https://example_main.com
JSON が置かれているサーバー https://example.com
とします。
静的なJSONの例
Web サーバーで Header を加えます。
クライアント
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<title>Cross Origin</title>
</head>
<body>
<blockquote>
<h2>Cross Origin</h2>
</blockquote>
<blockquote>
<hr />
<div id="outarea_aa">outarea_aa</div>
<div id="outarea_bb">outarea_bb</div>
<div id="outarea_cc">outarea_cc</div>
<div id="outarea_dd">outarea_dd</div>
<div id="outarea_ee">outarea_ee</div>
<div id="outarea_ff">outarea_ff</div>
<div id="outarea_gg">outarea_gg</div>
<div id="outarea_hh">outarea_hh</div>
<hr />
<a href="../">Return</a><br /><br />
Feb/06/2022 AM 07:00<br />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="cross_json.js"></script>
</body>
</html>
cross_json.js
// -----------------------------------------------------------------------
// cross_json.js
//
// Feb/06/2022
//
// -----------------------------------------------------------------------
jQuery (function ()
{
jQuery("#outarea_aa").text ("*** cross_json *** start ***")
const url_in = "https://example.com/tmp/cities.json"
jQuery.getJSON (url_in,function (data_aa)
{
jQuery("#outarea_cc").text (data_aa)
jQuery("#outarea_dd").text (JSON.stringify(data_aa))
jQuery("#outarea_ee").text (data_aa['wa'])
jQuery("#outarea_ff").text (data_aa['sa'])
})
jQuery("#outarea_hh").text ("*** cross_json *** end ***")
})
// -----------------------------------------------------------------------
設定がされていないサーバーにアクセスすると次のメッセージが出ます。
Firefox
クロスオリジン要求をブロックしました: 同一生成元ポリシーにより、https://example.com/tmp/cities.json にあるリモートリソースの読み込みは拒否されます (理由: CORS >ヘッダー ‘Access-Control-Allow-Origin’ が足りない)。ステータスコード: 200
Chrome
Access to XMLHttpRequest at 'https://example.com/tmp/cities.json' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
JSON の置かれたサーバーに次の設定を加えます。
Nginx の例です。
/etc/nginx/nginx.conf
location /tmp {
root /var/www/html;
index index.html index.htm;
add_header 'Access-Control-Allow-Origin' '*';
}
この設定で、Nginx を再起動すれば、JSON が表示されます。
```
動的なJSONの例
アプリケーションプログラムで Header を加えます。
Python の例
api01.py
#! /usr/bin/python
# -*- coding: utf-8 -*-
#
# api01.py
#
# Feb/06/2022
#
# ---------------------------------------------------------------------
import os
import json
import datetime
#
# ---------------------------------------------------------------------
ip_address = 'No address'
hostname = 'No hostname'
if 'REMOTE_ADDR' in os.environ:
ip_address = os.environ['REMOTE_ADDR']
#
if 'REMOTE_HOST' in os.environ:
hostname = os.environ['REMOTE_HOST']
#
#
now = datetime.datetime.now()
data_aa = {}
aa = 21
bb = 35
data_aa['aa'] = aa
data_aa['bb'] = bb
data_aa['wa'] = aa + bb
data_aa['sa'] = aa - bb
data_aa['ip_address'] = ip_address
data_aa['hostname'] = hostname
data_aa['now'] = "%s" % now
str_aa = json.dumps(data_aa)
#
print('Content-Type: text/json; charset=utf-8')
print("Access-Control-Allow-Origin: *\r\n")
print(str_aa)
#
# ---------------------------------------------------------------------