使用Axios的S3存储桶仅在IE11中提供403

Question

我有一个脚本，我们试图用预先签名的URL将文件提交到S3存储桶。在Chrome，Firefox，Edge和Safari中，这似乎运行良好，但是在Internet Explorer 11中。]

import axios from 'axios';
import { urls } from './Urls';
import { getAccountInfo } from './GigyaService';
import { getAWSHeaders } from '../helpers/getAWSHeaders';

export async function receiptUpload(file) {
  const account = await getAccountInfo();
  const headers = getAWSHeaders(account);
  const presignUrl = await axios.post(urls.fileUpload.presignUpload, {file_name: file.name}, {headers}).then(res => res.data);
  const fileUpload = presignUrl && presignUrl.presignUrl && await axios.put(presignUrl.presignUrl, file, {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  }).then(res => res.status === 200);
  const fileId = fileUpload && await axios.post(urls.fileUpload.receiptUpload, {file_name: file.name}, {headers}).then(res => res.data);
  const receiptSubmit = fileId && await axios.post(urls.fileUpload.receiptSubmit, {
    file_id: fileId.file_id
  }, {headers}).then(res => res.data);
  return receiptSubmit;
}
我的第一个倾向是标题未正确发送，但是我认为这也会导致其他浏览器失败。同样不幸的是，IE11并未真正为您提供有关所产生的请求标头是什么的非常详细的信息。因此，在Chrome中，标题看起来像这样...

PUT /228ea8e2445144cfa89b8dbbc2d05e38/237-536x354.jpg?....
Host: test-images-upload.s3.amazonaws.com
Connection: keep-alive
Content-Length: 35096
Accept: application/json, text/plain, */*
Origin: http://localhost:4502
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36
DNT: 1
Content-Type: application/x-www-form-urlencoded
Sec-Fetch-Site: cross-site
Sec-Fetch-Mode: cors
Referer: http://localhost:4502/content/loyalty/en/account/earn-points.html?wcmmode=disabled
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
并且在IE中将标头报告为...

Accept: */*
Accept-Encoding: gzip, deflate
Access-Control-Request-Headers: accept, content-type
Access-Control-Request-Method: PUT
Cache-Control: no-cache
Connection: Keep-Alive
Content-Length: 0
Host: test-images-upload.s3.amazonaws.com
Origin: http://10.xxx.xx.xx:xxxx
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; rv:11.0) like Gecko
在这一点上，我完全为问题可能感到困惑！

上面的代码似乎可以从Babel / Weback编译为以下代码：>

function _receiptUpload() {
  _receiptUpload = _babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1___default()(
  /*#__PURE__*/
  _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.mark(function _callee(file) {
    var account, headers, presignUrl, fileUpload, fileId, receiptSubmit;
    return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            console.log('test');
            _context.next = 3;
            return Object(_GigyaService__WEBPACK_IMPORTED_MODULE_4__["getAccountInfo"])();

          case 3:
            account = _context.sent;
            headers = Object(_helpers_getAWSHeaders__WEBPACK_IMPORTED_MODULE_5__["getAWSHeaders"])(account);
            _context.next = 7;
            return axios__WEBPACK_IMPORTED_MODULE_2___default.a.post(_Urls__WEBPACK_IMPORTED_MODULE_3__["urls"].fileUpload.presignUpload, {
              file_name: file.name
            }, {
              headers: headers
            }).then(function (res) {
              return res.data;
            });

          case 7:
            presignUrl = _context.sent;
            _context.t0 = presignUrl && presignUrl.presignUrl;

            if (!_context.t0) {
              _context.next = 13;
              break;
            }

            _context.next = 12;
            return axios__WEBPACK_IMPORTED_MODULE_2___default.a.put(presignUrl.presignUrl, file, {
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
              }
            }).then(function (res) {
              return res.status === 200;
            });

          case 12:
            _context.t0 = _context.sent;

          case 13:
            fileUpload = _context.t0;
            _context.t1 = fileUpload;

            if (!_context.t1) {
              _context.next = 19;
              break;
            }

            _context.next = 18;
            return axios__WEBPACK_IMPORTED_MODULE_2___default.a.post(_Urls__WEBPACK_IMPORTED_MODULE_3__["urls"].fileUpload.receiptUpload, {
              file_name: file.name
            }, {
              headers: headers
            }).then(function (res) {
              return res.data;
            });

          case 18:
            _context.t1 = _context.sent;

          case 19:
            fileId = _context.t1;
            _context.t2 = fileId;

            if (!_context.t2) {
              _context.next = 25;
              break;
            }

            _context.next = 24;
            return axios__WEBPACK_IMPORTED_MODULE_2___default.a.post(_Urls__WEBPACK_IMPORTED_MODULE_3__["urls"].fileUpload.receiptSubmit, {
              file_id: fileId.file_id
            }, {
              headers: headers
            }).then(function (res) {
              return res.data;
            });

          case 24:
            _context.t2 = _context.sent;

          case 25:
            receiptSubmit = _context.t2;
            return _context.abrupt("return", receiptSubmit);

          case 27:
          case "end":
            return _context.stop();
        }
      }
    }, _callee);
  }));
  return _receiptUpload.apply(this, arguments);
}
我有一个脚本，我们试图用预先签名的URL将文件提交到S3存储桶。在Chrome，Firefox，Edge和Safari中，这似乎运行良好，但是在Internet Explorer 11中。import ...

Answer 1

Internet Explorer，只是不断赠送的礼物。碰到了这个issue and solution，看起来非常相似。可能重复吗？