みんな！私はかなり長い間隠れていましたが、ここに最初に投稿してください。基本的には、私の質問は、公開されたGoogleシートからデータを取り出し、Javascriptでウェブサイトに掲載することです。私は、これはアスタリスクで何かが現物に置き換えられスクリプトタグの間に次のコードを使用して、成し遂げることができました（このコードは異なるセルのために複数回繰り返されることに注意してください）：Javascriptを使用してGoogleシートからデータを取得する際に必要なAccess Control-Allow-Originヘッダー？

$.ajax("https://docs.google.com/spreadsheets/d/*spreadsheetId*/pub?gid=0&range=*cellId*&single=true&output=csv").done(function(result){ 
    document.getElementById("*id*").innerHTML = result; 
});

私が得ましたこのコードはここからわずかに変更されました：Getting value of a cell from google docs spreadsheet into javascript

これは、自分のコンピュータでローカルに動作しますが、私がホスティングサービスにアップロードしたときに動作しないという問題です私はHostingerを使用していて、Chromeの最新バージョンを実行していますが、IEでは動作しません）。上記のリンク先の誰かが、ドメイン間の問題にもかかわらず、これがうまくいくはずだと言いましたが、なんらかの理由で、そうではありません。

https://docs.google.com/spreadsheets/d/*spreadsheetId*/pub?gid=0&range=*cellId*&single=true&output=csv. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://*myWebsite*' is therefore not allowed access.

私は終える前に：私は要素を検査し、コンソールタブの下に行くと、エラー（私はスプレッドシートにアクセスしようとしたたびに1つ）「のXMLHttpRequestをロードできません」、と彼らはそれぞれ次のように言うのも多いです私のポストをアップするには、私はそれを追加したい、私は十分なHTMLとCSSをウェブサイトを作ることを知っているが、私のJavascriptのスキルは現在非常に欠けている。私が使ったJavascriptの多くは、他の人が言っていることから適応されていて、私はそれらを盲目的に信じています。私はこれらのような、ヘッダにいくつかの他のスクリプトタグを追加してみました：

<script type="text/javascript" src="jquery-3.0.0.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

そして、これらは私を助けたり、単に無意味そこに座っている場合、私は本当に確かに言うことはできません。私は私のヘッダーにこれらを入れていると付け加えたいと思った。

だから、私の主な質問は以下のとおりです。

1）は、誰が現在または過去にこの問題を経験していますか？

2）明らかに間違っていますか？

3）そうでない場合は、公開されたGoogleスプレッドシートからデータを取得する方が良いでしょうか？

4）そうでない場合は、Chromeでエラーを回避するために追加できるコードはありますか？私はこれを避けるためにPHPのヘッダを使って何かをすることができると言っている人が多くいますが、本当に唯一のオプションでなければ、むしろそれを使用したくはないと思います。 Javascriptを使用してエラーを回避する方法がある場合は、それが理想的です。

とにかく、これを見て、答えに時間がかかる人には、どうもありがとう。私はこのような問題を抱えているような気がしますが、私は過去数週間にわたり探し回ってきました。私はうまくいくソリューションを見つけることができません。うまくいけば、他の人たちも同じことを経験しており、これからも学ぶことができます。あるいは、私はちょうど狂っているかもしれません。

出典

2016-07-06 D. Goodman

あなたはそのコードとまったく同じことを3回含めていますあなたのヘッダーに。あなたの問題とは何も関係ありませんが、これら3つのタグをすべて持っていれば、不必要に訪問者のブラウザが遅くなります。私は最初と3番目を取り出し、2番目のものだけを残します。 –

ありがとうございます！私はそれを修正することを確認します！ –

なぜこのエラーが発生しますか？

ブラウザでJavaScriptが実行されている場合、コードがアクセスできるものについては制限があります。

ブラウザでは、XMLHttpRequestを介して他のサイトからのコンテンツへのリクエストを行うことができます。これは、$.ajaxのバックグラウンドでの処理です。ただし、same-origin policyには一定の制限があります。

このポリシーの理由は、上記のリンクからは、JavaScriptを任意のクロスドメインリクエストを行うことができるようにすると、セキュリティ上の問題になることである。

「ユーザーが銀行のウェブサイトを訪問していると仮定し、doesnのログアウトする。その後、彼は任意の他のサイトに行き、そのサイトにはバックグラウンドで実行されているいくつかの悪質なJavaScriptコードがあり、銀行サイトからデータを要求しています。ユーザーはまだバンキングサイトにログインしているので、その悪質なコードはバンキングサイト上の何かを行う可能性があります。たとえば、最後のトランザクションのリストを取得したり、新しいトランザクションを作成したりします。これは、ブラウザが銀行ウェブサイトのドメインに基づいて銀行のWebサイトにセッションCookieを送受信できるためです。

このようなシナリオを回避するために、JavaScriptは異なるWebサイトへの要請を簡単に行うことができない同じ起源のポリシーを持っています。

Javascriptを使用して別のサイトからデータにアクセスする主な方法は、コンテンツを返すときにAccess-Control-Allow-Originヘッダーを追加するリクエストを行っているサイトです。これは、あなたが要求しているサイトが他のサイトがそのコンテンツにアクセスするための明示的な許可を与えていることをブラウザに伝えます。

シートでこの機能を使用できない場合は、別の解決策を探す必要があると思われます。あなたがリンクされ、質問を見てみると

を試みることができる

物事は、彼らの要求でkeyパラメータがあります。私は、keyパラメータがGoogleのAPIへのリクエストを認証するために使用されていると考えています。これはAPIキーです。これはリクエストに重大な可能性が高いため、Googleからリクエストを追跡することができます。このキーがないため、Googleがコンテンツの配信を拒否している可能性があります。
Googleがスプレッドシート用の正式なCORS APIを提供しているかどうかについていくつかの調査を行います。
JSONPのように、このポリシーを回避する方法を試してください。

基本的に、このエラーは、Googleがブラウザにコンテンツへのアクセス権を与えるヘッダーを提供していないことを意味します。

出典

2016-07-06 13:44:28

Googleドキュメントへの接続を処理するには、サーバーにスクリプトを作成する必要があります。これはphp、python、javascript（ノード）、または使用するサーバー側言語（この例では私はPHPを使用します）で行うことができ、CORSヘッダーをクライアントの応答に追加できます。

だからこれは私のhandler.phpファイルです：

<?php 
header("Access-Control-Allow-Origin: *"); 
$externalIp = file_get_contents('https://docs.google.com/spreadsheets/d/*spreadsheetId*/pub?gid=0&single=true&output=csv'); 
echo $externalIp;

そして、これは私のクライアントのファイルです：

<html> 
<head> 
    <title>My Title</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script> 
     $.ajax("handler.php").done(function(result){ 
      document.getElementById("result").innerHTML = result; 
     });   
    </script> 
</head> 
<body> 
    <div id="result"></div> 
</body>

出典

2016-07-06 15:08:30

Javascriptを使用してGoogleシートからデータを取得する際に必要なAccess Control-Allow-Originヘッダー？

答えて

なぜこのエラーが発生しますか？

関連する問題