为什么我在Express上使用CORS设置会出现飞行前错误？

我正在为个人网站设置一个休息api。我的个人网站是用Vue.js构建的，而api服务器是用express构建的。我在服务器上尝试了几种不同的CORS配置，但我似乎仍然得到了飞行前的错误，所以我认为我在某处缺乏理解。

最初的目标是通过容纳api / auth服务器并将其与前端vue.js应用程序分开托管来了解docker。这是问题或不良做法的一部分吗？

下面是我尝试过的两个CORS配置，我在其他帖子中找到但是没有成功。

配置＃1：

app.use((req, res, next) => {

    res.header("Access-Control-Allow-Origin", ":5000"); // I tried setting a specific IP as well as the * wildcard
    res.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE,OPTIONS");
    res.header("Access-Control-Allow-Headers", "Content-type,Accept,X-Custom-Header");

    // I think this if statement should respond the preflight request.
    if (req.method === "OPTIONS") {
        return res.status(200).end();
    }

    return next()

})

配置＃2：

const whitelist = [
    ':5000',
];
const corsOptions = {
    origin: function(origin, callback){
        var originIsWhitelisted = whitelist.indexOf(origin) !== -1;
        callback(null, originIsWhitelisted);
    },
    credentials: true
};
app.use(cors(corsOptions));

我也想知道它是否与我如何发出请求有关，所以我添加了从Vue.js应用程序中使用的方法：

attemptLogin: function(event) {
            event.preventDefault()
            axios.post(':5000/auth/login', { 
                username: this.username, 
                password: this.password 
            })
            .then(res => {
                if (res.data.success) {
                    this.updateLoginStatus()
                    this.updateJwt(res.data.token)
                }
            })
            .catch(error => {
                console.log(error)
            });
        }

其他可能有用的信息：

我尝试在同一台计算机上运行前端和后端，但没有运气。现在我在我的笔记本电脑和桌面上的前端运行后端。

如果您需要更多上下文，以下是两个存储库的GitHub Repos：

前端：

后端：

如果您是从同一个来源运行，那应该不是问题。我怀疑你是通过npm run serve运行Vue应用程序，然后将其指向后端服务器，后端服务器运行在不同的服务器上。

尝试在后端创建名为public的目录。在Vue中，运行npm run build然后获取缩小的文件并将它们放在公共目录中。

然后使用express在节点中访问它：

app.use(express.static(path.join(__dirname, 'public')));