JWT 身份验证问题：VueJS 项目中 Postman 工作，Axios 失败

Question

大家好

我在使用 Axios 的 VueJS 项目中进行身份验证请求时遇到了一些麻烦。

---

---

什么有效

当我使用 Postman 向 https://xyz.blabla/api/authenticate 发送 POST 请求时，正文如下：

{
    "username": "admin",
    "password": "admin",
    "rememberMe": true
}

我收到了令牌作为响应：如预期：（参见邮递员屏幕截图）。

麻烦

但是当我使用 Axios 发送相同的请求时，我没有得到令牌！ （请参阅错误屏幕截图）。这是我的代码：

<script lang="ts" setup>
import axios from 'axios';
import { type Ref, ref } from 'vue';

const authenticationError: Ref<boolean> = ref(false);
const login: Ref<string> = ref('');
const password: Ref<string> = ref('');
const rememberMe: Ref<boolean> = ref(true);

const doLogin = async () => {
// LOOK HERE
  const data = { username: login.value, password: password.value, rememberMe: rememberMe.value };
  console.log(data);

  try {
// AND LOOK HERE
    const result = await axios.post('https://xyz.blabla/api/authenticate', data);
    const bearerToken = result.headers.authorization;
    console.info('bearerToken: ', bearerToken);
    if (bearerToken && bearerToken.slice(0, 7) === 'Bearer ') {
      const jwt = bearerToken.slice(7, bearerToken.length);
      if (rememberMe.value) {
        localStorage.setItem('jhi-authenticationToken', jwt);
        sessionStorage.removeItem('jhi-authenticationToken');
      } else {
        sessionStorage.setItem('jhi-authenticationToken', jwt);
        localStorage.removeItem('jhi-authenticationToken');
      }
      console.log('jwt Token: ', jwt);
    }
    authenticationError.value = false;
  } catch (_error) {
    console.error('Login failed! ERROR: ', _error);
    authenticationError.value = true;
  }
};
</script>
<template>
  <div class="col-md-8">
    <v-alert v-if="authenticationError"><strong>Login failed!</strong>
      Please check your credentials and try again.
    </v-alert>
  </div>
  <v-sheet class="mx-auto" width="300">
    <v-form fast-fail @submit.prevent>
      <v-text-field v-model="login" type="text" autofocus label="Username"></v-text-field>
      <v-text-field v-model="password" type="password" autofocus label="Password"></v-text-field>
      <v-btn class="mt-2" type="submit" @click="doLogin" block>Submit</v-btn>
    </v-form>
  </v-sheet>
</template>

<route lang="yaml">
meta:
  layout: home
</route>

我的猜测

有人知道为什么我可以通过 Postman 获得令牌，但不能通过 Axios 获得令牌吗？我认为这可能与标头、CORS 或请求配置有关，但我不太确定。任何帮助或提示将不胜感激！预先感谢：祈祷：

我在 Postman 中尝试过，正如前面提到的，它工作得很好，正如你在屏幕截图中看到的那样。

Answer 1

找到解决方案：

这个问题正如 Quentin 在 CORS 问题中提到的那样。 关于同源政策

Postman 完全忽略 CORS，因为我将其用作桌面经典桌面应用程序，而我的 localhost:3000 是来自浏览器 api 的另一个域，它会在服务器上触发 CORS。

为了解决这个问题，我在 vite.config.mts 中添加了一个代理，以将请求转发到 API。看起来像这样：

server: {
  proxy: {
    '/api': {
      target: 'https://xyz.blabla/',
      changeOrigin: true,
      secure: false,
    },
  },
},

现在，在我的 Axios 调用中，我只使用“/api/authenticate”...

const result = await axios.post('/api/authenticate', data, {
      headers: {
        'Content-Type': 'application/json',
      },
    });

...而不是完整的 URL。这样通过代理发送请求，CORS 问题就消失了。 🎉

希望这对其他人也有帮助！