FROM CACHE - jp_header
解決済

cross domain accessの解決方法

cheche1
Shopify Partner
11 1 0
<iframe id="iframe" src="https://api.ipgeolocation.io/ipgeo?apiKey=ssss&ip=60.134.229.137&fields=country_code3"></iframe>
//例

<script type="text/javascript">

window.onload = function() {
	try {
		var doc = document.getElementsByTagName("iframe")[0].contentWindow.document;
	} catch(e) {
		alert(e);
	}
	alert(doc.body.innerHTML);
}
</script>

このような形でページロード時に外部apiのどこに国からアクセスしているか返してくれるものを使用しているんですが、cross domainのセキュリティの関係でデータが取れません。

 

こちらどういった解決方法が考えられますでしょうか?

 

 

カスタムアプリを作成すれば別途サーバー上で上記を実行してその内容をliquidに表示などしてクロスドメインを回避などできるものなのでしょうか?

 

ご教授お願いいたします。

1 件の受理された解決策
Tomoyuki_K
Shopify Partner
38 10 30

成功

Shopify は クロスドメインの iframe の読み込みを禁止する記述を http response header に追加してあるので、 iframe で外部ドメインの利用は難しいかと思います。

 

liquid テンプレートに記述した js から crossdomain の リクエストで利用できるアクセスもと判別 web APIを利用する。探していませんが、たぶんあると思います。

 

custom アプリの API等を shop のドメインで配信できる shopify proxies というのがありますが、文字通りproxy なので、リクエストもとの ip が pxoy の ip なってしまい、わからず、このケースだと使えないと思います。

 

 

元の投稿で解決策を見る

3件の返信3

cheche1
Shopify Partner
11 1 0

追記です。

 

 

 

<?php
header("Access-Control-Allow-Origin: *");
require_once('./config.php');

$query = '{ shop { name } }';

$options = [
  'http' => [
    'method' => 'POST',
    'header' => [
      'Content-Type: application/graphql',
      'X-Shopify-Access-Token: ' . 'apikey_460a20433333333333333'
    ],
    'content' => $query
  ]
];

$context = stream_context_create($options);
$contents = file_get_contents($store_host . '/admin/api/graphql.json', false, $context);

//  get raw data from the request 
$json = file_get_contents('https://api.ipgeolocation.io/ipgeo?apiKey=49506ddc9ad248fdddd9aba816a676b7&ip=60.134.232.17&fields=country_code3');
// Converts json data into a PHP object 
$data = json_decode($json, true);


//echo '<pre>';

echo "<script>";
?>
alert("<?php echo $data["country_code3"] ?>")
<?php
echo "</script>";
?>

 

 

 

customアプリを作成し、

php環境で同様にやってみたのですが、

 

やはり、liquidで読み込む際に

<script src="https://hogehoge.com/graphql.php"></script>

 

として読んでるので、

hogehoge.comに対するクロスドメインエラーが出てしまいました。。

 

他のアプリはいったいどうやって自作したコンテンツをliquid上に展開しているのでしょうか・・

Tomoyuki_K
Shopify Partner
38 10 30

成功

Shopify は クロスドメインの iframe の読み込みを禁止する記述を http response header に追加してあるので、 iframe で外部ドメインの利用は難しいかと思います。

 

liquid テンプレートに記述した js から crossdomain の リクエストで利用できるアクセスもと判別 web APIを利用する。探していませんが、たぶんあると思います。

 

custom アプリの API等を shop のドメインで配信できる shopify proxies というのがありますが、文字通りproxy なので、リクエストもとの ip が pxoy の ip なってしまい、わからず、このケースだと使えないと思います。

 

 

cheche1
Shopify Partner
11 1 0

ご返信遅くなりましてすいません!そうなんですね!ありがとうございます!調べてみます!