クロスオリジンアクセス

提供: svg2wiki
(版間での差分)
移動: 案内, 検索
(サーバ(サービス側での対処): CORSレスポンスヘッダを返すように設定する)
(サーバ(サービス側での対処): CORSレスポンスヘッダを返すように設定する)
5行: 5行:
 
** [https://phaier.github.io/school/engineering/platform/server/apache/how-to/cors.html apacheの例]
 
** [https://phaier.github.io/school/engineering/platform/server/apache/how-to/cors.html apacheの例]
 
** [https://enable-cors.org/server.html etc]
 
** [https://enable-cors.org/server.html etc]
外部からのアクセスを想定し、整備されたサービスではこの設定がされており、下記プロキシの利用は不要です。
+
* 外部からのアクセスを想定し、整備されたサービスではこの設定がされており、下記プロキシの利用は不要です。
  
 
== プロキシサービスを用意し これを経由させる==
 
== プロキシサービスを用意し これを経由させる==

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

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

目次

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

  • Access-Control-Allow-Origin *(もしくは指定オリジン)のレスポンスヘッダを返すようにサーバを設定します。
  • 外部からのアクセスを想定し、整備されたサービスではこの設定がされており、下記プロキシの利用は不要です。

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

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

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

SVGMap.jsの初期化

  • 先述の機能を用いて、容易にクロスオリジンアクセスを可能にするためのルートHTML文書の初期化手順を紹介します。corsProxy.jsは次章参照
    • ルートHTML文書の完全な実装例 : GitHub 

<!doctype html>
<html>
...
<script src="corsProxy.js"></script> <!-- クロスオリジンアクセス用プロキシライブラリ(下記) -->
<script src="SVGMapLv0.1_r17.js"></script>
...
<script>
var proxyPath = "{セットアップしたCORS AnywhereのURL}"; // CORS anywhere for svgmap.org / service.svgmap.org
corsProxy.setService(proxyPath, null, true,false);
svgMap.setProxyURLFactory(null,null,null, corsProxy.getURL,true);
</script>
...
</html>


corsProxy.js

初期化を容易に行うためのライブラリをご紹介します。gitHub

  • corsProxy.setService(pxUrl , directURLls , useAnonProxy, requireEncoding)
    • pxUrl : プロキシのURL
    • directURLls : [プロキシを使用しないURLのリスト]
    • useAnonProxy : anonymous属性を付与するかどうか
    • requireEncoding : プロキシサービスに渡すURLをURLエンコードするかどうか
  • corsProxy.getURL(プロキシに取得させるURL)

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,
	}
})();

個人用ツール
名前空間

変種
操作
案内
ツール
Translate