クロスオリジンアクセス
提供: svg2wiki
(版間での差分)
(→プロキシ経由のクロスオリジンアクセスを容易にするためのSVGMap.jsの支援機能) |
(→SVGMap.jsの初期化) |
||
| 21行: | 21行: | ||
== SVGMap.jsの初期化 == | == SVGMap.jsの初期化 == | ||
| + | 先述の機能を用いて、容易にクロスオリジンアクセスを可能にするための初期化手順を紹介します。 | ||
| + | |||
| + | <pre><code> | ||
| + | <!doctype html> | ||
| + | <html> | ||
| + | ... | ||
| + | <script type="text/javascript" src="../rev13/corsProxy.js"></script> <!-- クロスオリジンアクセス用プロキシライブラリ(下記) --> | ||
| + | <script> | ||
| + | var proxyPath = "{セットアップしたCORS AnywhereのAPIのURL}"; // CORS anywhere for svgmap.org / service.svgmap.org | ||
| + | corsProxy.setService(proxyPath, null, true,false); | ||
| + | svgMap.setProxyURLFactory(null,null,null, corsProxy.getURL,true); | ||
| + | </script> | ||
| + | |||
| + | </code></pre> | ||
===corsProxy.js=== | ===corsProxy.js=== | ||
初期化を容易に行うためのライブラリをご紹介します。[https://github.com/svgmap/svgMapDemo/blob/main/js/corsProxy.js gitHub] | 初期化を容易に行うためのライブラリをご紹介します。[https://github.com/svgmap/svgMapDemo/blob/main/js/corsProxy.js gitHub] | ||
| + | corsProxy.setService(プロキシのURL,[プロキシを使用しないURLのリスト],anonymous属性を付与するかどうか,プロキシサービスに渡すURLをURLエンコードするかどうか) | ||
| + | |||
<pre> | <pre> | ||
<code> | <code> | ||
2023年8月30日 (水) 02:26時点における版
XMLHttpRequestやfetchなどでwebappのあるサイトと異なるドメインにあるウェブサービス(webapi)にアクセスする場合、クロスオリジンアクセス制限によるエラーが起きる場合があります。このエラーはWebApp側だけでは解決できず、サーバ側の設定を調整する必要があります。
目次 |
サーバ(サービス側での対処): CORSレスポンスヘッダを返すように設定する
プロキシサービスを用意し これを経由させる
- node.jsによる実装
- phpによる実装
プロキシ経由のクロスオリジンアクセスを容易にするためのSVGMap.jsの支援機能
プロキシ経由のクロスオリジンアクセスの対応を容易にするためのいくつかの機能がSVGMap.jsに備わっています。
SVGMap.jsの初期化
先述の機能を用いて、容易にクロスオリジンアクセスを可能にするための初期化手順を紹介します。
<code>
<!doctype html>
<html>
...
<script type="text/javascript" src="../rev13/corsProxy.js"></script> <!-- クロスオリジンアクセス用プロキシライブラリ(下記) -->
<script>
var proxyPath = "{セットアップしたCORS AnywhereのAPIのURL}"; // CORS anywhere for svgmap.org / service.svgmap.org
corsProxy.setService(proxyPath, null, true,false);
svgMap.setProxyURLFactory(null,null,null, corsProxy.getURL,true);
</script>
</code>
corsProxy.js
初期化を容易に行うためのライブラリをご紹介します。gitHub corsProxy.setService(プロキシのURL,[プロキシを使用しないURLのリスト],anonymous属性を付与するかどうか,プロキシサービスに渡すURLをURLエンコードするかどうか)
<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>
