vue-cli: proxy a full url to development server

I'm building an app with vue. For a long time I've always used the devServer property through the vue-cli to handle my api requests. This always looked something like:

devServer: {
    proxy: {
        '/api': {
            target: 'http://localhost/my-project-api',
            changeOrigin: true,
            pathRewrite: {
                "^/api": ""
            }
        }
    }
}

Then my axios request would look like:

axios({
    method: "get",
    url: "/api/endpoint/",
    headers: {
        "Content-Type": "application/json;charset=UTF-8"
    },
    responseType: "json"
})
.then((response) => {
    resolve(response.data);
})
.catch((error) => {
    reject(error);
});

This always works fine, since on production my api folder is on the same server.

For a new project I'm hosting my api on a seperate server (subdomain) like https://api.mydomain.com while my project runs on the subdomain https://project.mydomain.com.

How do I arange this in my proxy? I tried this:

proxy: {
    'https://api.mydomain.com': {
        target: 'http://localhost/my-project-api',
        changeOrigin: true,
        pathRewrite: {
            "https://api.mydomain.com": ""
        }
    }
}

Then my back-end request through axios looks like:

axios({
    method: "get",
    url: "https://api.mydomain.com/endpoint/",
    headers: {
        "Content-Type": "application/json;charset=UTF-8"
    },
    responseType: "json"
})
.then((response) => {
    resolve(response.data);
})
.catch((error) => {
    reject(error);
});

But tyhen I get a cors complaint which tells me the proxy isn't using my dev server.

Any experience ont this?