7

ユーザーが送信したファイルを 10 MB のチャンクでアップロードしようとしています。現在、生の XMLHttpRequest (および XDomainRequest) を使用して、個々のスライス ( File.prototoype.slice) をフロント エンドにプッシュしています。バックエンドは、アップロード モジュールを使用した Nginx です。

参考までに、私が使用している方法の概要は次のsliceとおりです。

element.files[0].slice(...)

クロスブラウザーのプレフィックス付きメソッドwebkitSliceなどを理解しmozSliceています。

私が抱えている問題は、実際にクロスドメインリクエストを行うことです。から にアップロードしserver.localていupload.server.localます。Firefox では、optionsリクエストは正常に処理されますが、実際のリクエストはpost失敗します。Chrome と Opera では、optionsリクエストは失敗します。

 OPTIONS https://URL Resource failed to load

Firefox のヘッダーは次のとおりです。

リクエスト ヘッダー

OPTIONS /path/to/asset HTTP/1.1
Host: upload.server.local:8443
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:18.0) Gecko/20100101 Firefox/18.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Origin: https://server.local:8443
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-disposition,content-type,x-content-range,x-session-id
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache

応答ヘッダー

HTTP/1.1 204 No Content
Server: nginx/1.2.6
Date: Wed, 13 Feb 2013 03:27:44 GMT
Connection: keep-alive
access-control-allow-origin: https://server.local:8443
Access-Control-Allow-Methods: POST, OPTIONS
Access-Control-Allow-Headers: x-content-range, origin, content-disposition, x-session-id, content-type, cache-control, pragma, referrer, host
access-control-allow-credentials: true
Access-Control-Max-Age: 10000

実際のpostリクエストがブラウザから出ることはありません。Nginx アクセス ログにはpost. 何らかの理由でブラウザが停止します。この投稿がブロックされている理由を解明するにはどうすればよいですか?

Chromium 24
Firefox 18
Opera 12.14

すべてのブラウザーが CORS を適切にサポートしていることを確認しました ここ.

アップロードを にポイントするhttps://cors-test.appspot.com/testことで、問題がサーバー側のヘッダーにあることを確認しました。

4

1 に答える 1

1

プリフライト チェックで十分な権限が返されず、POST リクエストが完全に承認されていない場合、POST はブラウザから離れません。質問に含まれる要求/応答は、私には十分に見えます。

  • withCredentials = trueXMLHttpRequest で設定していますか?
  • サーバーに有効な (自己署名ではない) SSL 証明書があることを確認しますか? 無効な証明書でサイトを閲覧するための例外を追加した場合でも、HTTPS は CORS チェックに失敗する可能性があります。
  • キャッシュを空にしてみましたか? Access-Control-Max-Age: 10000応答ヘッダーを設定しました。それは3時間近くです。あなたがこれよりも長く取り組んでいることは知っていますが、特にテストしている間は、代わりにそのヘッダーをゼロに設定して、古いアクセス許可のブラウザー キャッシュに夢中にならないようにしてください。

一般的には、CORS ヘッダーをできる限り寛容にすることから始め、ゆっくりとセキュリティを上げて、どこで問題が発生するかを確認します。ただし、これは完全に単純ではありません。たとえば、CORS に関する MDN ドキュメントによると、

認証済みのリクエストに応答する場合、サーバーはドメインを指定する必要があり、ワイルド カードは使用できません。ヘッダーが次のようにワイルドカード化されている場合、上記の例は失敗します。Access-Control-Allow-Origin: *

あなたの質問のリクエスト部分を に送信するとhttps://cors-test.appspot.com/test、次のメッセージが返されます。

HTTP/1.1 200 OK
Cache-Control: no-cache
Access-Control-Allow-Origin: https://server.local:8443
Access-Control-Allow-Headers: content-disposition,content-type,x-content-range,x-session-id
Access-Control-Allow-Methods: POST
Access-Control-Max-Age: 0
Access-Control-Allow-Credentials: true
Cache-Control: no-cache
Expires: Fri, 01 Jan 1990 00:00:00 GMT
Content-Type: application/json
Content-Encoding: gzip
Content-Length: 35
Vary: Accept-Encoding
Date: Thu, 23 May 2013 06:37:34 GMT
Server: Google Frontend

したがって、そこから始めて、壊れるまでセキュリティをどんどん追加して、原因を突き止めることができます。

于 2013-05-15T05:59:34.333 に答える