Vue Cli 3 blocks CORS even after headers change

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

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');
July 11, 2019 19:25 PM

Related Questions

Updated March 08, 2019 13:26 PM

Updated April 21, 2019 03:26 AM

Updated April 11, 2018 23:26 PM

Updated June 18, 2018 09:26 AM