webpack を使用して開発サーバーを実行し、S3 バケット内のアイテムを一覧表示して、ブラウザーで javascript aws-sdk を使用して結果をコンソールに出力しようとしています。
そうするとき、私はこのエラーを受け取ります:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://bucketname.s3.amazonaws.com/?list-type=2&max-keys=2. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
ただし、次の方法で証明された webpack dev サーバー構成にそのヘッダーが設定されています。
curl -I http://localhost:8080
HTTP/1.1 200 OK
X-Powered-By: Express
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, PATCH, OPTIONS
Access-Control-Allow-Headers: X-Requested-With, content-type, Authorization
X-Content-Type-Options: nosniff
Content-Type: text/html; charset=utf-8
Content-Length: 7170
Vary: Accept-Encoding
Date: Sat, 02 Dec 2017 16:15:04 GMT
Connection: keep-alive
だから私はすべてを試してみました:
HTTP/1.1 404 Not Found
X-Powered-By: Express
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: *
Access-Control-Allow-Headers: *
ヘッダーがあり、エラーが欠落していると言っている場合、それは承認のようなものでしょうか?
それが本当にヘッダーのセットアップである場合、ヘッダーが実際にそこにある場合、次のステップは何ですか?
アップデート****
1: S3 に CORS 設定を追加しますが、ヘッダーが不平を言っているのは S3 にはないと思います:
<?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>
</CORSRule>
</CORSConfiguration>
また、バケットはパブリックまたは静的ホスティングが有効になっていません。
2:これはうまくいきました:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>
マークされた回答で指定された URL から