vue.js - Google Cloud Platform emulator errors on Mac ARM processor

Question

I have a set of Firebase functions that I am trying to test locally by running the emulator with the command: firebase emulators:start --only functions.

In order to test my onCall functions, I created a simple Vue.js application where I can log in and trigger the function on the emulator as I indicate with firebase.functions().useEmulator("localhost", 5001) in the main.js file where I import the Firebase library.

This all works great when the emulator is run on either an Intel 2017 MacBook or a 2012 MacBook Pro. When I try to run the emulator on a new 2020 MacBook Air (M1), I get this error in the client Vue.js application after triggering the function:

Access to fetch at 'http://localhost:5001/myproj/us-central1/getSaveSendItems-getSaveSendItems' from origin 'http://localhost:8080' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I have read somewhere that the can sometimes just appear even if it's not really a CORS error and something else is off. I have tried running both the Vue.js application and the emulator on Rosetta at the same time. The same error resulted.

The functions never get called as there is no error appearing on the function side. Nonetheless, I am including an example onCall function here which can be used to reproduce:

/* eslint-disable promise/always-return */
const admin = require('firebase-admin');
const functions = require('firebase-functions');
const fetch = require('node-fetch'); //for fetch POST API
require('dotenv').config();
const apiProviderSecrets = require('apiProvider');
const db = admin.firestore();

exports.myOnCallFunction = functions.https.onCall(async (data, context) => {
  const userId = context.auth.uid;
  var raw = JSON.stringify({
    client_id: process.env.client_id,
    secret: process.env.secret,
    client_name: 'Insert Client name here',
    country_codes: ['US'],
    language: 'en',
    user: { client_user_id: userId },
    products: ['auth'],
  });

  var requestOptions = {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: raw,
    redirect: 'follow',
  };

  let token = await fetch('https://development.apiProvider.com/link/token/create', requestOptions)
    .then((response) => response.text())
    .then((result) => {
      functions.logger.info(result);
      let tokenResult =  JSON.parse(result).link_token

      functions.logger.info('link token created', tokenResult);

      return tokenResult;
    })
    .catch((error) => console.log('error', error));

    return { token: token }
});

Answer 1

等待大神解答