Nuxt.js CORS 错误：它没有 HTTP ok 状态

Question

我正在构建 Nuxt.js 应用，但遇到了 CORS 错误。我已经在我请求资源的服务器上启用了 CORS，从该服务器上解决了我原来的 CORS 错误，但现在我看到一个新错误，“它没有 HTTP ok 状态。”

这是来自 Nuxt.js 应用的标注。

async executeCallout(context, payload) {

    // Start loading...
    let loadingId = context.dispatch('handleLoad', { 
      msg: 'Getting the thing', 
      method: 'executeCallout', 
      id: null 
    }, { root: true });

    // Execute http request. 
    let url = context.getters.getCalloutUrl(payload.func);
    let response = await this.$axios({
      method: 'post', 
      headers: {
        "Content-type": "application/json"
      },
      url: url,
      data: payload.body
    });

    // Resolve loading...
    context.dispatch('handleLoad', {
      msg: null, 
      method: null, 
      id: loadingId
    }, { root: true });
    
    // Handle http response.
    if (response.data.success) {
      return response.data;
    } else {
      context.dispatch('handleError', { 
        msg: response.data.data, 
        origin: 'callouts.js', 
        method: 'executeCallout' 
      }, { root: true })
    }
  }
};

这是处理请求的谷歌云函数。

const helper = require('./helper');
const Joi = require('joi');

exports.handler = async (req, res) => {
  try {

    // Set headers
    res.set('Access-Control-Allow-Origin', '*');
    if (req.method == 'OPTIONS') {
      res.set('Access-Control-Allow-Methods', 'POST', 'OPTIONS');
      res.set('Access-Control-Allow-Headers', 'Content-Type');
    }

    const payload = await schema.validate(req.body);
    if (payload.error) {
      res.status(400).json({
        success: false, 
        data: payload.error
      })
    } else {
      if (payload.value.product == 'quickbooks') {
        let response = await helper.functionCall({ alias: payload.value.alias, function: 'intuit', payload: payload.value.payload });
        res.status(response.success ? 200 : 400).json({
          success: response.success ? true : false, 
          data: response.data
        })
      } else if (payload.value.product == 'distance-matrix') {
        let response = await helper.functionCall({ alias: payload.value.alias, function: 'distance-matrix', payload: payload.value.payload });
        res.status(response.success ? 200 : 400).json({
          success: response.success ? true : false, 
          data: response.data
        })
      }
    }
  } catch (err) {
    res.status(500).json({
      success: false, 
      data: err
    })
  }
}

const schema = Joi.object({
  alias: Joi.string().required(), 
  product: Joi.string(),
  action: Joi.string(), 
  payload: Joi.object()
})

尝试发送请求时的响应如下所示。

Answer 1

您可能需要设置飞行前响应的 HTTP 状态。

const helper = require('./helper');
const Joi = require('joi');

exports.handler = async (req, res) => {
  try {

    // Set headers
    res.set('Access-Control-Allow-Origin', '*');

    if (['POST', 'OPTIONS'].includes(req.method)) {
      res.set('Access-Control-Allow-Methods', 'POST', 'OPTIONS');
      res.set('Access-Control-Allow-Headers', 'Content-Type');
    }

    if (req.method == 'OPTIONS') {
      res.status(200)
      return
    }

    const payload = await schema.validate(req.body);

    if (payload.error) {
      res.status(400).json({
        success: false,
        data: payload.error
      })
    } else {
      if (payload.value.product == 'quickbooks') {
        let response = await helper.functionCall({
          alias: payload.value.alias,
          function: 'intuit',
          payload: payload.value.payload
        });
        res.status(response.success ? 200 : 400).json({
          success: response.success ? true : false,
          data: response.data
        })
      } else if (payload.value.product == 'distance-matrix') {
        let response = await helper.functionCall({
          alias: payload.value.alias,
          function: 'distance-matrix',
          payload: payload.value.payload
        });
        res.status(response.success ? 200 : 400).json({
          success: response.success ? true : false,
          data: response.data
        })
      }
    }
  } catch (err) {
    res.status(500).json({
      success: false,
      data: err
    })
  }
}

const schema = Joi.object({
  alias: Joi.string().required(),
  product: Joi.string(),
  action: Joi.string(),
  payload: Joi.object()
})

注意我添加的代码：

    if (['POST', 'OPTIONS'].includes(req.method)) {
      res.set('Access-Control-Allow-Methods', 'POST', 'OPTIONS');
      res.set('Access-Control-Allow-Headers', 'Content-Type');
    }

    if (req.method == 'OPTIONS') {
      res.status(200)
      return
    }

我还没有使用谷歌云功能，所以我不确定是不是我错了。如果有的话请给我反馈。