web-dev-qa-db-ja.com

SafariでCORSリクエストが機能しない

CORS xhrリクエストを行っています。これはクロムでは正常に機能しますが、サファリで実行すると、「ロードできません---- 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リクエストが最初に作成され、これが許可されていないリクエストであることがわかります。 OriginヘッダーはSafariの応答には含まれませんが、クロムに含まれます。何がこれを引き起こすでしょう。どんな助けも大歓迎です。

更新：Safari for Windowsで試してみましたが、動作するので、ここで何が起こっているのかわかりません。私が使用しているMacはリモートアクセス（Macincloud.com）ですが、それとは何の関係もないと思います。

javascriptsafarixmlhttprequestcors
46
Patrick

すべての回答をありがとう、私は最終的に自分でこれを手に入れました。 responseHeadersに「Origin」を追加し、正常に動作するようになりました。

0
Patrick

Amazon S3のファイルに対してXHRリクエストを行うときに同じエラーが発生しました。 Safari 7では失敗していました。あなたがAmazon S3を使用していないことは知っていますが、このソリューションが他の人を助ける場合に投稿したいと思いました。

問題は、Safari 7でAccess-Control-Request-Headersヘッダーが「Origin、x-requested-with」に設定されていたが、AWS CORS設定では「x-requested-with」のみが許可されていたことです。

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
        <AllowedHeader>x-requested-with</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

許可ヘッダーとして「Origin」を追加しましたが、すべて正常に機能しました。

        <AllowedHeader>Origin</AllowedHeader>

注：*のAllowedOriginは開発目的専用です。詳細については、以下の@andesコメントを参照してください。

44
Seth

同様の問題、CORSエラーが発生しました。 Firefoxで動作します＆ChromeしかしSafari 10では動作しません。

JSON URLに末尾のスラッシュを付ける必要があることがわかりました。

7
William Macdonald

私の場合、Accept-Langaugeヘッダーの問題でした。私が追加しました Accept-Language内部Access-Control-Allow-Headersそして解決しました。

1
deen

CORSリクエストには、Origin fflog.storage.googleapis.comを使用する必要があります。共通のstorage.googleapis.com Originを使用すると、どのサイトでもバケットにアクセスできます。

overrideMimeTypeを削除してみてください。 MIMEタイプを設定すると、正しく返されます。

Safari POSTリクエストにも問題がありますが、まだ回答がありません。GETはOKです。

0
Kyaw Tun

オーバーライドMIMEタイプを削除してください。

 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();
0
cocco

しようとすると

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が許可されていない 認証済みのリクエスト を送信しようとしていると推測できます。

0
Old Pro

Amazon S3に関しては、許可されたヘッダーであるContent-TypeおよびRangeを追加した後、safariでのみ機能しました。これらの1つが仕事をしました。

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
        <AllowedHeader>Origin</AllowedHeader>
        <AllowedHeader>X-Requested-With</AllowedHeader>
        <AllowedHeader>Content-Type</AllowedHeader>
        <AllowedHeader>Range</AllowedHeader>
    </CORSRule>
</CORSConfiguration>
0
Edhowler

CORSがChromeで機能するのと同じ問題を抱えていましたが、SafariでOriginエラーをスローしました。 Kerberos認証の問題であることが判明しました。 SafariでXHR URLを直接ロードすると、資格情報の入力を求められました。それらを入力した後、私は元のサイトに戻り、SafariでCORSエラーが発生しなくなりました。

0
Seth Moore

URLを照会すると、次の Access-Control headers が返されます。

Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: Authorization, Cache-Control, Content-Length, Date, Expires, Server, Transfer-Encoding, x-goog-meta-foo1

Access-Controlヘッダーと関係があるのではないかと思われます。

実際にカスタムヘッダーを送信している場合は、次のことを試してください。

Access-Control-Allow-Headers: *

また、Access-Control-Expose-Headersは違いをもたらします。

それを超えて、実際の要求/応答ヘッダーを見ると実際に役立ちます。

0
Luke