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

Posted 2023-03-04

【中文标题】Nuxt.js CORS 错误：它没有 HTTP ok 状态

【英文标题】：Nuxt.js CORS error: It does not have HTTP ok status

【发布时间】：2021-08-06 09:26:51

【问题描述】：

我正在构建 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()
)

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

【问题讨论】：

这能回答你的问题吗？ Why does my http://localhost CORS origin not work?

【参考方案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
    

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

【讨论】：

这似乎已经解决了这个问题，尽管现在我回到了原来的 CORS 错误。 “从源 'localhost:3000' 访问 XMLHttpRequest 在 'localhost:3000' 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：不存在 'Access-Control-Allow-Origin' 标头请求的资源。”