vue.jsとgo apiサーバーのcors設定がうまく出来ない

Question

corsの設定で悩んでいます
どう設定したらエラーがなくなるか、何が原因なのかがわかりません。
フロントとバックは別のサーバーを使っているためcorsを使用する前提でお願いします。

フロント firebase hosting
vue-cli (https://VueServer)

バックエンド heroku
goa design (https://APIServer)

###発生したエラー

Access to XMLHttpRequest at 'https://APIServer' from origin 'https://VueServer' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

トップページはリクエストヘッダーにAccess-Control-Allow-Originがあるのですが、別のページに遷移するとAccess-Control-Allow-Originがなくなっているのがchromeのデベロッパーモードで確認しました。
Access-Control-Allow-Originがないと書いてありますがaxiosの方で設定していように思えます、、、

Vue

import axios from "axios";

function request(method, url, options) {
    var promise = null;
    var params = {};
    var headers = {};
    if (options.params) {
        // リクエストパラメーターのセット
        params = options.params;
    }

    if (options.headers) {
        // カスタムヘッダーのセット
        headers = options.headers;
    }
    headers = {
        'X-Requested-With': 'XMLHttpRequest',
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': 'https://VueServer',
        'crossDomain': true
    }

    promise = axios({
        method: method,
        url: url,
        data: params,
        headers: headers,
    });
    promise.catch(function () {
        return console.log(promise);
    });
    return promise;
}
export function Get(url, options) {
    return request("get", url, options);
}
export function Post(url, options) {
    return request("post", url, options);
}
export function Put(url, options) {
    return request("put", url, options);
}
export function Delete(url, options) {
    return request("delete", url, options);
}

apiの叩きかたはこんな感じにしています

export function postCardInfo(param) {
    return Post(baseUrl + "/card", {
        params: param,
    })
}

goa design

	cors.Origin("https://VueServer", func() {
		cors.Headers("X-Requested-With", "Content-Type", "application/json", "text/plain", "Origin", "Accept")
		cors.Methods("GET", "POST", "PATCH", "PUT", "DELETE", "OPTIONS")
		cors.Expose("X-Time")
		cors.MaxAge(600)
	})

cors "goa.design/plugins/v3/cors/dsl"
goa designのcorsプラグインを使用しています。

Answer 1

当該のプラグイン等については知らないのですが、少なくとも言えることは、Access-Control-Allow-Originはリクエストヘッダではなくレスポンスヘッダとして必要です。
なので、以下の「これは不要」とした行は削除してください。

import axios from "axios";

function request(method, url, options) {
    // 中略
    headers = {
        'X-Requested-With': 'XMLHttpRequest',
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': 'https://VueServer',  // ← これは不要
        'crossDomain': true
    }

「あってもいいじゃないか?」と思われるかもしれませんが、上記があると、「このリクエストヘッダに対する許可」が必要になります。不要なリクエストヘッダをつけると動かなくなります。
その上で、APIサーバー側のレスポンスヘッダとして以下が出力されるように調整してください。

Access-Control-Allow-Origin: https://VueServer