javascript - node.js express，一个非常奇怪的行为

Question

我有一个 Express 服务器正在运行。

我所做的是从 HTML 上传一个 Excel 文件，然后 Express 解析该文件并进行一些计算。

在Excel文件中，每一行都有关于用户地址的信息。

对于每个地址，我们的 Express 服务器将使用 google map geocoding API 来计算纬度和经度。

但是，因为 Google 不接受每秒超过 50 个对其地理编码 API 的请求，所以我必须使用 settimeout 来延迟计算。

例如，如果 Excel 文件有 50 个地址，那么我必须对每个地址使用 settimeout 以避免该速率限制。

这是我使用 settimeout 并计算纬度、经度的代码

createFromFile(req, res) { 
    var form = new formidable.IncomingForm();
    return form.parse(req, function (err, fields, files) {
      if (err)
        return res.status(500).json({error: err.message})

      var workbook = new exceljs.Workbook();
      return workbook.xlsx.readFile(files.excelfile.path).then(function() {
        // use workbook
        var worksheet = workbook.getWorksheet(1)
        var data = []
        for (var i=2; i<=worksheet.rowCount; i++) {
          data.push({
            from_name: worksheet.getCell('A'+i).value + '',
            from_address: worksheet.getCell('B'+i).value + '',
            from_phone: worksheet.getCell('C'+i).value + '',
            receiver_name: worksheet.getCell('D'+i).value + '',
            receiver_address: worksheet.getCell('E'+i).value + '',
            receiver_phone: worksheet.getCell('F'+i).value + '',
            note: worksheet.getCell('H'+i).value + ''
          })
        }

        var delay = function(t) {
          return new Promise(function(resolve)           {
            setTimeout(resolve, t)
          })
        }

        return Promise.all(data.map(function(item, i) {
          return function() {
            return delay(750*i).then(function() {
              winston.log('debug', 'process for item '+i)
              return geocoder.geocode(item.from_address).then(function(geo_data) {
                data[i].from_coord = {
                  lat: geo_data[0].latitude,
                  lng: geo_data[0].longitude
                }
                return geocoder.geocode(item.receiver_address).then(function(geo_data) {
                  data[i].receiver_coord = {
                    lat: geo_data[0].latitude,
                    lng: geo_data[0].longitude
                  }
                })
              })
              .catch(function(geo_error) {
                winston.log('error', 'geo_error', {error: geo_error})
                throw new Error('Address in line ' + i + ' is not valid')
              })
            })
          }()
        }))
        .then(function() {
          winston.log('debug', 'we are done calculating location')
          return res.status(201).json(data)
        })
      })
      .catch(function(e) {
        winston.log('error', 'an error occurred')
        return res.status(500).json({error: e.message})
      })
    })
  }

下面是我调用 Express API 的代码，我使用 React 做前端工作并使用 javascript fetch api 向服务器请求。

startUploadFile() {
  this.props.showLoader()
  let data = new FormData()
  data.append('excelfile', this.state.selectedFile)
  data.append('name', 'excelfile')
  var me = this
  fetch(Const.restServer + '/create-from-file', {
    headers: {
      'Access-Token': this.props.access_token,
    },
    method: 'POST',
    body: data
  })
  .then(function(r) {
    return r.json()
  })
  .then(function(r) {
    if (r.hasOwnProperty('error'))
      throw new Error(r.error)

    me.props.hideLoader()
    me.props.showDialog('success', 'Process Complete')
  })
  .catch(function(e) {
    console.log(e)
    me.props.hideLoader()
    me.props.showDialog('error', e.message)
  })
}

我的问题是当我使用上面的代码在浏览器上上传文件时，我在 express 日志文件中看到两个请求。像这样:

我也会在这里提供我的代码来记录每个请求的信息

app.use(function(req, res, next) {
  winston.log('debug', 'call api:', {
    api: req.url, requestMethod: req.method
  })
  res.header("Access-Control-Allow-Origin", "*");
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept, Access-Token, Web-Admin-Request"
  );
  next()
});

function isAuthenticated(req, res, next) {
  /**
  ** Rest API Middleware check if access_token is valid
  */
  let accessToken = req.body.accessToken || req.get('Access-Token')

  // bunch of codes to check accessToken
  next()
}

app.post('/order/create-from-file', isAuthenticated, orderController.createFromFile);

我不明白为什么会这样。如果我使用 Postman 并选择一个文件并上传，它工作正常 - 日志中只有一个请求。

谁能告诉我是什么原因。我觉得这是 Express 的一个 Bug。我的 Express 版本是 4.15.2

Answer 1

您的代码添加到请求中的 Access-Token 请求 header 会触发浏览器在尝试 POST 请求之前发送 CORS 预检 OPTIONS 请求.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests提供了更多细节，但要点是，只要您的代码将 Access-Token header 添加到请求中，就无法阻止浏览器进行额外的预检 OPTIONS 请求——因为它是浏览器作为 CORS 协议(protocol)的一部分自动执行的操作。

使用 Postman 时看不到额外请求的原因是它不执行 CORS 预检 OPTIONS 请求——只有浏览器发送它，并且只针对 XHR 发出的请求/从特定来源(Postman 不是)的浏览器中运行的前端 JavaScript 代码获取。