Vue.js调用后端支付接口提示‘No token Provided’的问题解决咨询

我一眼就发现问题所在了——你在使用axios发送POST请求时，请求头（headers）的位置放错了，导致后端根本接收不到你传递的token，所以才会返回"No token Provided"的错误。

核心错误点 #

axios.post的正确语法是：

axios.post(url, requestBody, config)

你现在把headers对象直接放在了第二个参数（请求体）里，而不是第三个参数的配置项中，这就相当于你把请求头的内容当成了要发送给后端的表单数据，后端自然无法从req.headers里拿到token。

另外还有个容易忽略的小细节：Authorization字段的Bearer和token之间必须加空格，这是OAuth2认证的标准格式，否则后端解析token时也可能出问题。

修正后的代码 #

methods: { 
  sendTokenToServer(charge, response) { 
    const token = localStorage.getItem("token");
    // 先判断token是否存在，避免空值发送
    if (!token) {
      console.error("Token不存在，请先登录");
      return;
    }
    axios.post(
      `http://localhost:5000/api/pay`,
      // 第二个参数：请求体（这里是你要发送的业务数据）
      { totalPrice: this.getCartTotalPriceWithShipping },
      // 第三个参数：配置项，包含请求头
      {
        headers: { 
          Authorization: `Bearer ${token}`, // 注意Bearer后面的空格
          "x-access-token": token 
        }
      }
    ) 
    .then(res => { 
      console.log(res); 
    })
    .catch(err => {
      console.error("请求失败：", err);
    }); 
  } 
}; 

额外调试建议 #

修改后，你可以在浏览器开发者工具的「Network」标签中，找到发送的pay请求，查看「Request Headers」部分，确认Authorization和x-access-token这两个字段是否已经正确出现在请求头里。如果能看到，后端就能正常获取到token了。

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