Vue.js中如何用async/await添加请求头？代码报错求助

• 语法错误：headers定义时未赋值给变量，直接写headers: {...}属于无效语法，会触发JS语法报错。
• 请求头未传入：axios.post调用时未携带自定义headers，导致后端无法获取认证信息。
• async/await使用不当：声明了async方法但仍用.then()，既没通过await等待请求完成，console.log(response)输出的是Promise对象而非实际响应，且.then()内部的错误无法被外层catch捕获。
• Authorization格式错误："Bearer" + token缺少空格，正确格式应为Bearer ${token}，否则后端解析认证令牌会失败。

<script>
import axios from "axios";
export default {
  data: () => ({
    fullName: "",
    streetAddress1: ""
  }),
  created() {
    // 用户未授权则跳转登录页
    if (!localStorage.getItem("token")) {
      this.$router.push("/login");
    }
  },
  methods: {
    async onAddAddress() {
      const token = localStorage.getItem("token");
      // 正确定义请求头变量
      const headers = {
        "Content-Type": "application/json",
        Authorization: `Bearer ${token}`, // 补全Bearer与token间的空格
        "x-access-token": token
      };

      try {
        const data = {
          fullName: this.fullName,
          streetAddress: this.streetAddress1
        };
        // 使用await等待请求完成，获取实际响应结果
        const response = await axios.post(
          "http://localhost:5000/api/addresses",
          data,
          { headers } // 传入请求头参数
        );
        console.log(response);
      } catch (error) {
        console.error("error >>", error);
      }
    }
  }
};
</script>

• 可把axios的请求头配置抽成全局拦截器，避免每个请求重复写headers：

// 在项目入口文件（如main.js）中配置
axios.interceptors.request.use(config => {
  const token = localStorage.getItem("token");
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
    config.headers["x-access-token"] = token;
  }
  config.headers["Content-Type"] = "application/json";
  return config;
});

后续axios请求会自动带上认证头，无需每次手动传入。

内容的提问来源于stack exchange，提问作者xander