Nuxt.js CORS error: It does not have HTTP ok status

Question

I'm building a Nuxt.js app and I'm running into a CORS error. I already enables CORS on the server in which I am requesting resources from which resolved my original CORS error but now I'm seeing a new error, "It does not have HTTP ok status."

Here is the callout from the Nuxt.js app.

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 })
    }
  }
};

Here is the google cloud function that is handling the request.

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()
})

Response when trying attempting to send the request looks like this.

Does this answer your question? [Why does my http://localhost CORS origin not work?](https://stackoverflow.com/questions/10883211/why-does-my-http-localhost-cors-origin-not-work) — gorevanova, May 17 '21 at 07:17

score 1 · Answer 1 · answered May 17 '21 at 05:26

You may need to set the HTTP status for the pre-flight response.

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()
})

Note the code I added:

    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
    }

I have not used google cloud function yet, so I'm not sure if there is something i wrong. Please give me feedback if any.

That seems to have solved that issue although now I'm back to the original CORS error. "Access to XMLHttpRequest at 'https://cloudfunctionurl.com' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource." — Raine Petersen, May 17 '21 at 06:18

Nuxt.js CORS error: It does not have HTTP ok status

1 Answers1