Fetch API在身份验证期间无法提取，并伴有CORS错误

Question

我有一个按钮，可将获取的内容发布到使用KOA和JWT的API。点击时启动的抓取的JavaScript是：

<script>

        function loginButton(user, pass) {
            fetch('http://localhost:5454/api/login', {
                method: "post",
                headers: {
                    'Content-Type': "application/json"
                },
                body: JSON.stringify({
                    username: user,
                    password: pass
                })
            })
            .then( (response) => {
                console.log("Success")
            })
            .catch(e => console.log(e));
        }

    </script>

我的身份验证代码为：

router.post(`${BASE_URL}/login`, async (ctx) => {
const reqUsername = ctx.request.body.username
const reqPassword = ctx.request.body.password

const unauthorized = (ctx) => {
    ctx.status = 401
    ctx.body = {
        error: 'Invalid username or password'
    }
}

let attemptingUser
try {
    attemptingUser = await Employee.findOne({ where: { username: reqUsername }})
    if (attemptingUser != null && attemptingUser.password === reqPassword) {
        ctx.status = 200
        ctx.body = {
            username: attemptingUser.username,
            given_name: attemptingUser.given_name,
            role: attemptingUser.role,
            created_at: attemptingUser.createdAt,
            updated_at: attemptingUser.updatedAt,
        }

        const token = jwt.sign({ username: attemptingUser.username, role: attemptingUser.role }, SECRET)
        ctx.set("X-Auth", token)
    } else {
        unauthorized(ctx)
    }

} catch(err) {
    console.error(err)
    console.error(`Failed to find username: ${reqUsername}`)
    unauthorized(ctx)
}

}）

我的KOA启动的代码是：

    require('dotenv').config()
const Koa = require('koa')
const Router = require('koa-router')
const bodyParser = require('koa-bodyparser')
const baseRoutes = require('./routes')
const cors = require('@koa/cors');

const PORT = process.env.PORT || 8080

const app = new Koa()


app.use(bodyParser())
app.use(baseRoutes.routes())
app.use(cors());

app.listen(PORT, () => {
    console.log(`Server listening on ${PORT}`)
})

我在http服务器上使用端口8080，在npm服务器上使用端口5454。我在Fetch的抓包中无法获取，以及与响应标头中没有Access-Control-Allow-Origin标头相关的CORS错误。我已经尝试了几件事，并且准备好以新的眼光看它，有什么提示吗？

编辑：我已成功在X-Auth标头中接收令牌，但由于某些原因，它仍会引发错误，我希望在错误失控之前解决它们。

Answer 1

非常确定的问题是，默认情况下，koa / cors没有启用OPTIONS动词。由于您的客户端位于其他端口上，因此它将在POST之前向您的登录API发送预检请求。使用OPTIONS动词的飞行前检查可能会失败。