CORSのxhrリクエストをしています。 これはクロームでは問題なく動作しますが、サファリで実行すると 'Can not load ---- access not allowed by Access-control-allow-origin' と表示されます。 コードは全く同じで、サーバーにCORSを設定しました。 以下は私のコードです(アクセス制御がありますが、accessTokenなしで自由に試すことができます)。
var water;
var req = new XMLHttpRequest;
req.overrideMimeType("application/json");
req.open('GET', 'https://storage.googleapis.com/fflog/135172watersupplies_json', true);
req.setRequestHeader('Authorization', 'Bearer ' + accessToken);
origThis = this;
var target = this;
req.onload = function() {
water = req;
req.send(null);
リクエストヘッダを見ると、最初にOPTIONSリクエストが行われており、これが許可されていないリクエストであることがわかります。 オリジンヘッダは、Safariではレスポンスに含まれませんが、chromeでは含まれます。 何が原因なのでしょうか。何か助けがあれば、とてもありがたいです。
UPDATE Windows版Safariで試したところ、動作したので、何が起こっているのかよくわかりません。 Macincloud.comでリモートアクセスをしているのですが、それが関係しているとは思えません。
試してみると
curl -v -X OPTIONS \
-H 'Origin: fflog.storage.googleapis.com' \
-H 'Access-Control-Request-Method: GET' \
https://storage.googleapis.com/fflog/135172watersupplies_json
他のヘッダも含めて、取得します。
Access-Control-Allow-Origin: *
Mac OS 10.8.3 上の Safari 6.0.4 から https://storage.googleapis.com/fflog/135172watersupplies_json
に対して AJAX リクエストを実行すると、403 エラーが発生しますが、すべて実行されます。
ですから、ワイルドカード Access-Control-Allow-Origin
が許可されていない credentialed request を送信しようとしているのだとしか思えません。
overide mimetypeの削除を試みる。
var
jsonhandler=function(){var req=JSON.parse(this.response);console.log(req)},
req=new XMLHttpRequest;
req.open('GET','https://storage.googleapis.com/fflog/135172watersupplies_json');
req.setRequestHeader('Authorization','Bearer '+accessToken);
req.onload=jsonhandler;
req.send();