「クロスオリジンアクセス」の版間の差分

提供: svg2wiki
移動先: 案内、 検索
(→‎プロキシサービスを用意し　これを経由させる)
(→‎プロキシ経由のクロスオリジンアクセスを容易にするためのSVGMap.jsの支援機能)
19行目: 19行目:
 
* [[解説書#setProxyURLFactory]]
 
* [[解説書#setProxyURLFactory]]
 
* [[解説書#setImageProxy]]
 
* [[解説書#setImageProxy]]
 +
 +
==
 +
 +
 +
<pre>
 +
<code>
 +
var corsProxy = (function(){
 +
var proxyUrl="";
 +
var anonProxy = false;
 +
var directURLlist = [];
 +
var noEncode=true;
 +
function setImageProxy( pxUrl , directURLls , useAnonProxy, requireEncoding){
 +
if ( requireEncoding ){
 +
noEncode = false;
 +
}
 +
proxyUrl = pxUrl;
 +
if ( directURLls ){
 +
directURLlist = directURLls;
 +
} else {
 +
directURLlist = [];
 +
}
 +
if ( pxUrl.indexOf("http")==0){
 +
var pxDomain = pxUrl.substring(0,pxUrl.indexOf("/",8));
 +
directURLlist.push(pxDomain);
 +
}
 +
 +
if ( useAnonProxy ){
 +
anonProxy = true;
 +
} else {
 +
anonProxy = false;
 +
}
 +
}
 +
 +
function isDirectURL(url){
 +
// urlに、directURLlistが含まれていたら、true　含まれていなかったらfalse
 +
var ans = false;
 +
for ( var i = 0 ; i < directURLlist.length ; i++ ){
 +
if ( url.indexOf(directURLlist[i])>=0){
 +
ans = true;
 +
break;
 +
}
 +
}
 +
return ( ans );
 +
}
 +
 +
function getImageURL(imageUrl){
 +
// ローカル（同一ドメイン）コンテンツもしくはそれと見做せる(directURLlistにあるもの)もの以外をproxy経由のURLに変換する
 +
// proxyの仕様は、 encodeURIComponent(imageUrl)でオリジナルのURLをエンコードしたものをURL末尾(もしくはクエリパート)につけたGETリクエストを受け付けるタイプ
 +
if ( proxyUrl && imageUrl.indexOf("http") == 0){
 +
if (isDirectURL(imageUrl)){
 +
// Do nothing (Direct Connection)
 +
} else {
 +
if ( noEncode ){
 +
imageUrl = proxyUrl + (imageUrl);
 +
} else {
 +
imageUrl = proxyUrl + encodeURIComponent(imageUrl);
 +
}
 +
// console.log("via proxy url:",imageUrl);
 +
}
 +
} else {
 +
// Do nothing..
 +
}
 +
return (imageUrl);
 +
}
 +
return {
 +
setService:setImageProxy,
 +
getURL:getImageURL,
 +
}
 +
})();
 +
</code>
 +
</pre>

2023年8月30日 (水) 02:15時点における版

XMLHttpRequestやfetchなどでwebappのあるサイトと異なるドメインにあるウェブサービス(webapi)にアクセスする場合、クロスオリジンアクセス制限によるエラーが起きる場合があります。このエラーはWebApp側だけでは解決できず、サーバ側の設定を調整する必要があります。

サーバ(サービス側での対処): CORSレスポンスヘッダを返すように設定する

プロキシサービスを用意し　これを経由させる

プロキシ経由のクロスオリジンアクセスを容易にするためのSVGMap.jsの支援機能

プロキシ経由のクロスオリジンアクセスの対応を容易にするためのいくつかの機能がSVGMap.jsに備わっています。

== 


<code>
var corsProxy = (function(){
	var proxyUrl="";
	var anonProxy = false;
	var directURLlist = [];
	var noEncode=true;
	function setImageProxy( pxUrl , directURLls , useAnonProxy, requireEncoding){
		if ( requireEncoding ){
			noEncode = false;
		}
		proxyUrl = pxUrl;
		if ( directURLls ){
			directURLlist = directURLls;
		} else {
			directURLlist = [];
		}
		if ( pxUrl.indexOf("http")==0){
			var pxDomain = pxUrl.substring(0,pxUrl.indexOf("/",8));
			directURLlist.push(pxDomain);
		}
		
		if ( useAnonProxy ){
			anonProxy = true;
		} else {
			anonProxy = false;
		}
	}
	
	function isDirectURL(url){
		// urlに、directURLlistが含まれていたら、true　含まれていなかったらfalse
		var ans = false;
		for ( var i = 0 ; i < directURLlist.length ; i++ ){
			if ( url.indexOf(directURLlist[i])>=0){
				ans = true;
				break;
			}
		}
		return ( ans );
	}
	
	function getImageURL(imageUrl){
		// ローカル（同一ドメイン）コンテンツもしくはそれと見做せる(directURLlistにあるもの)もの以外をproxy経由のURLに変換する
		// proxyの仕様は、 encodeURIComponent(imageUrl)でオリジナルのURLをエンコードしたものをURL末尾(もしくはクエリパート)につけたGETリクエストを受け付けるタイプ
		if ( proxyUrl && imageUrl.indexOf("http") == 0){
			if (isDirectURL(imageUrl)){
				// Do nothing (Direct Connection)
			} else {
				if ( noEncode ){
					imageUrl = proxyUrl + (imageUrl);
				} else {
					imageUrl = proxyUrl + encodeURIComponent(imageUrl);
				}
//				console.log("via proxy url:",imageUrl);
			}
		} else {
			// Do nothing..
		}
		return (imageUrl);
	}
	return {
		setService:setImageProxy,
		getURL:getImageURL,
	}
})();
</code>
「https://www.svgmap.org/wiki_test/index.php?title=クロスオリジンアクセス&oldid=1783」から取得