常連

クロスドメインかつBASIC認証のかかったリソースにajaxでアクセスする方法を、いろいろと試しておりますがなかなかうまくいきません。

データは、パラメータ等をつけてアクセスするとJSONP形式で吐かれるAPIです。

```JavaScript
$.ajax({
	type:'GET',
	url:APIurl,
	dataType:'jsonp',
	jsonpCallback:'callback',
	cache:false,
	async:true,
	beforeSend: function(xhr){
		xhr.setRequestHeader('Authorization', 'Basic ' + btoa('username:password'));
	}
}).done(
	function(data){
		～以下、成功時の処理～
```

のような書き方をしています。
xhrの中身を見てみると、setRequestHeader 内に値はセットされていますが、認証の ID/Password を求められます。

JavaScriptだけで解決する方法はありますでしょうか？

何卒宜しくお願い申し上げます。

クロスドメインかつBASIC認証のかかったリソースにajaxでアクセスする方法

### 前提・実現したいこと

Google App Scripts でWebAPIを作り、pythonからURLアクセスし、レスポンス（text）を受け取りたい。

参考サイト：https://qiita.com/satto_sann/items/be4177360a0bc3691fdf


### 現状
URLアクセスすればコード200とレスポンスをブラウザに表示されるようになりました。

サイト紹介のAPIのURL:https://script.google.com/macros/s/AKfycbzZtvOvf14TaMdRIYzocRcf3mktzGgXvlFvyczo/exec?text=Hello&source=en&target=ja

![イメージ説明](f2c1e07ed5c9c066c4eb08bcd5e7d58c.png)

もしくは、Operaブラウザでのアクセス後の表示
![イメージ説明](0f1c129cee5de8cc22c811d4814ca0e7.png)


### source code
今回python側のJSON受け取りの問題なのですが念のためGAS側も掲載します。

```GAS
function doGet(e) {
    // リクエストパラメータを取得する
    var p = e.parameter;
    //  LanguageAppクラスを用いて翻訳を実行
    var translatedText = LanguageApp.translate(p.text, p.source, p.target);
    
    // レスポンスボディの作成
    var body;
    if (translatedText) {
        body = {
          code: 200,
          text: translatedText
        };
    } else {
        body = {
          code: 400,
          text: "Bad Request"
        };
    }
    // レスポンスの作成
    var response = ContentService.createTextOutput();
    // Mime TypeをJSONに設定
    response.setMimeType(ContentService.MimeType.JSON);
    // JSONテキストをセットする
    response.setContent(JSON.stringify(body));

    return response;
}
```


```python
import urllib
import urllib.request
import pdb
response = urllib.request.urlopen('https://script.google.com/macros/s/AKfycbzZtvOvf14TaMdRIYzocRcf3mktzGgXvlFvyczo/exec?text=Hello&source=en&target=ja')

print('url:', response.geturl())
print('code:', response.getcode())
print('text:', response.info()['body'])
print('text3:', response.info())
print('text4', response.headers['Content-Type'])
print('text4', response.headers)

print('text4', response.body['text'])
print('Content-Type:', response.info()['Content-Type'])
content = response.read()
print(content)
response.close()
```

### 発生している問題・エラーメッセージ
しかし、そのままprint表示しますとResponse<200>のみで”こんにちは"のみを返却して利用したいのですが、目当てのものが取得できないでおります。

かなりたくさんの方法でレスポンスからtextの結果のこんにちはを受け取ろうとしましたが、他のものがprint表示されています。


### 試したこと
①
```python
import json
import urlopen
import pdb
jsons  = urlopen("https://script.google.com/macros/s/AKfycbzZtvOvf14TaMdRIYzocRcf3mktzGgXvlFvyczo/exec?text=Hello&source=en&target=ja").read().decode('utf-8').split('\n')

result = []
for v in jsons :
    try:
        js = json.loads(v)
        result.append( js['info'] )
    except Exception:
        pass
pdb.set_trace()
print(result)
```

②
```python
from urllib.request import Request, urlopen
from urllib.error import URLError
req = Request("https://script.google.com/macros/s/AKfycbzZtvOvf14TaMdRIYzocRcf3mktzGgXvlFvyczo/exec?text=Hello&source=en&target=ja")
try:
    response = urlopen(req)
except URLError as e:
    if hasattr(e, 'reason'):
        print('We failed to reach a server.')
        print('Reason: ', e.reason)
    elif hasattr(e, 'code'):
        print('The server couldn\'t fulfill the request.')
        print('Error code: ', e.code)
print(response)
```
③
```python
import requests
import json

#GET先URL
# url = "https://script.google.com/macros/s/AKfycbzZtvOvf14TaMdRIYzocRcf3mktzGgXvlFvyczo/exec"

#JSON形式のデータ
jsonData = {
    "text": "Hello",
    "source": "en",
    "target": "ja"
}    

#GET送信
response = requests.post(
    url = "https://script.google.com/macros/s/AKfycbzZtvOvf14TaMdRIYzocRcf3mktzGgXvlFvyczo/exec",
    params = jsonData
    )

resDatas = response.json()

print(resDatas)
```

④
```python
import execjs
print(execjs.eval("'red yellow blue'.split(' ')"))

ctx = execjs.compile("""function add(x, y) {return x + y;}""")
print(ctx.call("add", 1, 2))

import requests
get_url_info = requests.get('https://script.google.com/macros/s/AKfycbzZtvOvf14TaMdRIYzocRcf3mktzGgXvlFvyczo/exec?text=Hello&source=en&target=ja')
print(get_url_info)


payload = {'text': 'Hello', 'source': 'en', 'target': 'ja'}
r = requests.get('https://script.google.com/macros/s/AKfycbzZtvOvf14TaMdRIYzocRcf3mktzGgXvlFvyczo/exec', params=payload)
print(r.args['text'])
```

どのようにすればレスポンスコード200ではなくtextのこんにちはを取得できるのでしょうか。
pythonのHTTPGET時のJSONのパラメータ受け取りについてアドバイス頂けないでしょうか。
よろしくお願い致します。

### 補足情報（FW/ツールのバージョンなど）

python3.7
windows10 home
GAS

### 2020/05/24 10:56 追記
GAS側で公開設定しなければレスポンスのContentTypeがJSONにならずデコードエラーになってしまう（API実行後のpython受け取り時）ため、しっかりと公開をしているか再度確認しました。
エラーの際の画面
![イメージ説明](aee32bf2304b84dcda090206ca3f87c5.png)

対応としてアドバイス頂いたGAS公開設定。
![イメージ説明](a0d5b3b2553b506f0348c09d8591636a.png)

しかし再度API実行したところ状況変わらずでした。
ひとつ懸念点は、どうやらGASは唯一のデメリットとして反映するまでに時間がかかるとのことでした。でもすぐに反映できたと言われたため私は他に原因があるのでしょうか。

GASのAPIへpythonからURLアクセスGet送信し特定のレスポンスを受け取りたい。

Promise.allを利用してjsonpデータを並行で取得しようとしたのですが、最後に記述したPromise以外は"Uncaught ReferenceError: callback is not defined"とcallbackが未定義扱いのエラーが発生してしまいます。

```javascript
$(function() {
  Promise.all([promise(), promise()]).then(function(values) {
    console.log(values);
  });
});

function promise() {
  var def = $.Deferred();

  $.ajax({
    type: 'GET',
    url: './js/data.jsonp',
    dataType: 'jsonp',
    jsonpCallback: 'callback'
  }).fail(function(jqXHR, textStatus, errorThrown) {
    def.resolve("fail");
  }).done(function(data) {
    def.resolve("done");
  });

  return def.promise();
}
```
jsonpのデータは次のものを読み込んでいます。
```jsonp
callback(
{
	"hoge": "foo"
}
);

```

JQueryのバージョン3.1.1です。

jsonデータであれば、問題なく読み込めるのですが、jsonpだとエラーが発生してしまいます。
不足している処理内容がありましたら、ご教授のほどよろしくお願いいたします。

Promise.allでjsonpデータを取得しようとすると、callbackが未定義扱いされてしまう

###前提・実現したいこと
javascriptでapiを使って簡単なサイトを作ってみようとしたのですが、どうやらjsonpデータを受け取れていないようです。
jQueryでコーディングした場合はできましたので、zipcloud自体には問題はないはずです（当たり前ですが）

簡単なサイトとは具体的には、郵便番号を入力し、それに対応する住所をapiを使って持って来て、それを表示するというものです。

###発生している問題・エラーメッセージ
コンソールに表示されたエラー
```
js1.js:12 GET https://zipcloud.ibsnet.co.jp/api/search?zipcode=113-0043&callback=jsonData net::ERR_CONNECTION_CLOSED
(anonymous) @ js1.js:12

```

###該当のソースコード
```html
<DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="stylesheet.css" type="text/css">
		<script type="text/javascript" src="js1.js"></script>
	</head>
		<body>
			<h3>Address Search</h3>
			<label>Postal Code<input id="postalcode" type="text" 
			size="13" maxlength="8" placeholder="example: xxx-xxxx"></label>
			<button id="btn">Search</button>
			<div id="result">
				<p><label>Prefectures<input id="pref" type="text" size="6"></label></p>
				<p><label>Cities<input id="city" type="text" size="6"></label></p>
				<p><label>Street address<input id="saddress" type="text"></label></p>
			</div>
		</body>
</html>
```
```javascript
document.addEventListener("DOMContentLoaded", function () {
var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
	var postalcode = document.getElementById('postalcode');
	var pref = document.getElementById('pref');
	var city = document.getElementById('city');
	var address = document.getElementById('saddress');
	var script = document.createElement('script');
	
	script.src = "https://zipcloud.ibsnet.co.jp/api/search?zipcode="
	+ postalcode.value + "&callback=jsonData";
	document.body.appendChild(script);
	document.body.removeChild(script);
})
})

function jsonData(data) {
	pref.value = data.result[0].address1;
	city.value = data.result[0].address2;
	address.value = data.result[0].address3;
}
```
```css
#result {
	margin-top: 30px;
}
```
###補足情報(言語/FW/ツール等のバージョンなど)
コードは上から順に
sample.html
js1.js
stylesheet.css
となっております。

回答よろしくお願いします。

javascriptでjsonpデータを受け取りたい(zipcloud 郵便番号)

### 前提・実現したいこと
検索ボックスにキーワードを入力して「検索」ボタンをクリックしたら、WikipediaAPIからJSONPで取得してきた検索結果を表示する
というプログラムを作っています。
コールバック関数を書く位置によって以下のエラーが出てしまうのですが、どのようなルールに反しているために出てしまうのか、理由が分かりません。
`Uncaught ReferenceError: callback_func is not defined`
どなたかご解説いただければありがたいです。



### 発生している問題・エラーメッセージ
このように、addEventListenerの外側にコールバック関数を書くと正常に動作します
```
<body>
  <h1>Lesson 8-5-q</h1>
  <form id = "search">
    <input id = "keyword" name = "keyword" type = "text">
    <button type = "submit">検索</button>
  </form>
  <div id="output"> </div>
  <script>
    var callback_func = function(data){
        var json = data.query.search;
        var html = '';
        for(var i=0; i < json.length; i++){
          html += '<h2><a href="https://ja.wikipedia.org/wiki/' + json[i].title + '">' + json[i].title + '</a></h2>';
          html += '<div class="excerpt"><p>' + json[i].snippet + '</p></div>';
        }
        document.getElementById("output").innerHTML = html;
      };
      document.getElementById('search').addEventListener("submit",function(e){
      e.preventDefault();
      var keyword = document.getElementById('keyword');
      var script = document.createElement('script');
      script.src = 'https://ja.wikipedia.org/w/api.php?format=json&action=query&list=search&srsearch=' + keyword.value + '&callback=callback_func';
      document.body.appendChild(script);
    });    
  </script>
</body>
```

### 該当のソースコード
しかし、addEventListenerの内側にコールバック関数を書くと上記エラーが発生します。
```
<body>
  <h1>Lesson 8-5-q</h1>
  <form id = "search">
    <input id = "keyword" name = "keyword" type = "text">
    <button type = "submit">検索</button>
  </form>
  <div id="output"> </div>
  <script>
      document.getElementById('search').addEventListener("submit",function(e){
      e.preventDefault();
      var keyword = document.getElementById('keyword');
      var script = document.createElement('script');
      script.src = 'https://ja.wikipedia.org/w/api.php?format=json&action=query&list=search&srsearch=' + keyword.value + '&callback=callback_func';
      document.body.appendChild(script);
      var callback_func = function(data){
        var json = data.query.search;
        var html = '';
        for(var i=0; i < json.length; i++){
          html += '<h2><a href="https://ja.wikipedia.org/wiki/' + json[i].title + '">' + json[i].title + '</a></h2>';
          html += '<div class="excerpt"><p>' + json[i].snippet + '</p></div>';
        }
        document.getElementById("output").innerHTML = html;
      };
    });    
  </script>
</body>
```

Uncaught ReferenceError: callback_func is not defined　の発生原因について

jsonファイルから抽出したデータを、
連想配列に格納し、さらに取得したデータ分、
1データごとに別配列に格納したいのですが、
配列の追加がうまくいかず、困っています。
以下、該当コードです。

```ここに言語を入力
$.ajax({
  data: {
		dataType: "jsonp",
		success: function(data) {
		var nArray = new Object;
		var nStrArray = new Object;

	for (var i = 0; i < data['data'].length; i++) {
		var n = data['data'].length;

		//data抽出
		//link
		var keyurl = "link";
		var linkurl = data['data'][i]['link'];
		nStrArray[keyurl] = linkurl;

		//srcurl
		var keysrc = "src";
		var srcurl = data['data'][i]['images']['thumbnail']['url'];
		nStrArray[keysrc] = linkurl;

		//日付
		var keydata = "key";
		var d = new Date(data['data'][i]['created_time'] * 1000);
		var year  = d.getFullYear();
		var month = d.getMonth() + 1;
		var day  = d.getDate();
		var ndata = year + '/' + month + '/' + day;
		nStrArray[keydata] = ndata;

		//キャプション
		if(data['data'][i]['caption'] != null) {
		var keycaptext = "text";
		var captext = data['data'][i]['caption']['text'];
		nStrArray[keycaptext] = captext;
		}

		//nArray[i].push(nStrArray);
		nArray[i] += nStrArray;
	};
});
```

上記のコードで、nArrayにループされるごとに、nStrArrayごとを格納したいのですが、
データが全て上書きされてしまいnArrayの配列の中身が全て同じものという、
現象に陥っております。

検索し、配列の追加はpush関数を使用するという記述を見つけたので、
それも試してみたのですが、うまく配列の中に格納されずに困っております。
初歩的なご質問で申し訳ありませんが、javaScriptの配列操作に詳しい方ご教授の程お願い致します。

【javascript】配列に連想配列を格納する

###やりたいこと
最寄駅情報取得の外部APIを叩いて、JSONデータを取得したい。

この辺を参考に、クロスドメインでのデータ取得方法を実装しました。
https://www.webprofessional.jp/jsonp-examples/

###コードと困っていること
```
var url = "http://express.heartrails.com/api/json?method=getStations&x=" + longitude + "&y=" + latitude + "callback=?"

$.getJSON(
  url,
  function(json){
    console.log("OK");
});
```

上記コードでアクセスし、DeveloperToolのNetworkを見てみるとstatus_code: 200とresponseもJSON形式で返ってくるのですが、

```
Uncaught SyntaxError: Unexpected token :
```
コンソール上には上記のエラーが出て、コールバック関数が実行されません。
返却されたJSONの値にアクセスしたいのですが、どうしたらよいでしょうか。

レスポンス
```
Cache-Control:private, max-age=0, must-revalidate
Connection:close
Content-Length:897
Content-Type:application/json; charset=utf-8
ETag:"441d2962e4d44847439b76038593d690"
Expires:Thu, 01 Dec 1994 16:00:00 GMT
Pragma:no-cache
Server:nginx/0.8.54 + Phusion Passenger 3.0.0 (mod_rails/mod_rack)
Status:200
X-Powered-By:Phusion Passenger (mod_rails/mod_rack) 3.0.0
X-Runtime:3
```
レスポンスデータ
```
{"response":{"station":[{"distance":"230m","postal":"1410031","x":139.724069,"next":"大崎広小路","prev":null,"y":35.625069,"line":"東急池上線","prefecture":"東京都","name":"五反田"},{"distance":"240m","postal":"1410022","x":139.723909,"next":"目黒","prev":"大崎","y":35.625805,"line":"JR山手線","prefecture":"東京都","name":"五反田"},{"distance":"300m","postal":"1410032","x":139.722357,"next":"戸越銀座","prev":"五反田","y":35.622303,"line":"東急池上線","prefecture":"東京都","name":"大崎広小路"},{"distance":"340m","postal":"1410022","x":139.724181,"next":"高輪台","prev":"戸越","y":35.627111,"line":"都営浅草線","prefecture":"東京都","name":"五反田"},{"distance":"760m","postal":"1410031","x":139.713149,"next":"武蔵小山","prev":"目黒","y":35.625421,"line":"東急目黒線","prefecture":"東京都","name":"不動前"}]}}

```

解決方法がわかる方いらっしゃいましたら、よろしくお願いします。
ブラウザ： GoogleChrome

JSONPで外部APIからJSONデータ取得後にunexpected token : のエラー

### 経緯と解決したいこと

APIを使ってみたいと思い勉強を始めましたが、FetchでAPIを叩こうとした際に同一オリジンポリシーの問題で、APIが叩けませんでした。

なのでCORSについて、詳細なことを調べてみたのですが、分からない箇所が複数あり、その分からない箇所について教えて欲しいです。


### 同一オリジンポリシーは何の為にあるのか？

クライアントがAというオリジンのウェブサイトを表示している時、そこからBというオリジンのサーバーにはセキュリティの保護上通信が行うことが出来ないというのが、同一オリジンポリシーだと解釈しています。

そこでセキュリティ上、どうして問題があるのかということが気になり調べてみました。すると二つの記事がヒットしたので、スクリーンショットを貼ります。

![イメージ説明](1f4e0b1402cd4d3ea60b0851de166aa9.png)

こちらの記事ではウェブサイトの情報が悪用されるのを防ぐ為に、つまり上の例でいうとBというオリジンが持つウェブサイトの情報を守る為に同一オリジンポリシーがあると書かれています。

![イメージ説明](37836fedda8a7374dcb838cb061efbe3.png)

こちらの記事ではクライアント側の個人情報を守る為と書かれています。


同一オリジンポリシーがセキュリティ上どうして必要なのか、他のサイトでも調べてみたのですが、説明がまちまちだったり、解説が今の私には難しいレベルだったりして、疑問の解決には至りませんでした。

同一オリジンポリシーは、クライアント側や別オリジンのサイトが持つ情報が悪用されない為、二つの役割があるということなのでしょうか。

教えて欲しいです。


### APIがなぜか叩けた。

```ここに言語を入力

fetch('https://holidays-jp.github.io/api/v1/date.json')
  .then(response => response.text())
  .then(text => {
    console.log(text);
  });

```

ローカルに保存された、htmlからAPIを叩いたら、jsonが返ってきました。

私のブラウザはローカルに保存されたファイルを開いており、そのファイルから「https://holidays-jp.github.io/api/v1/date.json」
へと通信を行おうとすると、同一オリジンポリシーの問題で通信ができないはずです。

一体どうしてAPIを叩けたのでしょうか？