CORS の使い方

CORS(Cross-Origin Resource Sharing) の例です。
index.html が置かれているサーバー　https://example_main.com
JSON が置かれているサーバー　https://example.com
とします。

#静的なJSONの例#

Web サーバーで Header を加えます。

クライアント

```html: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>
```

```js: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

```text
クロスオリジン要求をブロックしました: 同一生成元ポリシーにより、https://example.com/tmp/cities.json にあるリモートリソースの読み込みは拒否されます (理由: CORS >ヘッダー ‘Access-Control-Allow-Origin’ が足りない)。ステータスコード: 200
```

Chrome

```text
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 の例です。

```text:/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 の例

```py: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)
#
# ---------------------------------------------------------------------
```