Vue Cli 3 blocks CORS even after headers change

by KasparTr   Last Updated July 11, 2019 19:26 PM - source

I'm running locally both a Vue Cli 3 app and a Google Cloud Function (CF).

I have changed the response headers in CF as follows:

res.set('Access-Control-Allow-Origin', "*")
res.set('Access-Control-Allow-Methods', 'GET, POST')

and it serves me well when I call the CF from a browser.

For some reason, the same call is CORS blocked when invoked inside the Vue app. I tried with Firefox (CORS enabled by settings as well as using a plugin).

I also added the following to vue.config.js as described here:

// vue.config.js
module.exports = {
    devServer: {
       proxy: 'http://localhost:8010', //<-- my CFs are running on 8010
   }
}

Not sure how to proceed as the whole point of CFs is to not have any servers running (including a proxy).

Any pointers are much appreciated, cheers.



Answers 1


Problem was with the local Cloud Function emulator.

Got it working when I altered the Cloud Function headers in the live environment.

// Set CORS headers for preflight requests
function setCorsHeaders(req, res){
  res.set('Access-Control-Allow-Origin', CLIENT_URL);
  res.set('Access-Control-Allow-Credentials', 'true');

  if (req.method === 'OPTIONS') {
    // Send response to OPTIONS requests
    res.set('Access-Control-Allow-Methods', 'GET,POST');
    res.set('Access-Control-Allow-Headers', 'Content-Type');
    res.set('Access-Control-Max-Age', '3600');
    res.status(204).send('');
  }
}
KasparTr
KasparTr
July 11, 2019 19:25 PM

Related Questions


Firebase function OnCall - 404 error CORS

Updated March 08, 2019 13:26 PM