使用axios发送x-www-form-urlencoded格式认证会话请求失败

数据老陈

2026-8-29

核心错误点

你的代码传参逻辑完全不符合axios的接口规则，这是认证失败的根本原因：

axios.post的参数顺序是post(url, 请求体数据, 请求配置)，你把请求配置（withCredentials、headers等）错放到了第二个参数也就是请求体的位置，服务端收到的请求体是一堆配置字段，根本拿不到邮箱密码。
你把构造好的URLSearchParams参数放到了第三个参数的params字段里，这个字段的内容会被拼接到URL的查询参数后缀上，不会作为POST请求体发送，完全不符合application/x-www-form-urlencoded的格式要求。
Access-Control-Allow-Origin是服务端返回的响应头，前端手动在请求头里加这个字段没有任何作用，反而可能触发异常的CORS预检请求导致请求被拦截。
你提前定义的config配置完全没有被用到，属于无效代码。

修正后代码

const sessionUrl = 'http://31.220.52.187:8082/api/session';

// 构造x-www-form-urlencoded格式的请求体
const formParams = new URLSearchParams();
formParams.append('email', 'admin');
formParams.append('password', 'admin');

axios.post(
  sessionUrl,
  formParams, // 第二个参数直接传构造好的表单数据作为请求体
  {
    withCredentials: true, // 必须放在请求配置里，才能自动携带/保存会话cookie
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  }
)
.then(response => {
  console.log('Authenticated', response.data);
})
.catch(error => {
  // 打印错误详情方便排查，不要只输出固定文案
  console.log('Authentication failed:', error.response?.data || error.message);
});

额外排查项

如果改完还是报错，按以下顺序检查：

跨域问题：如果你的前端页面和Traccar服务不是同协议+同域名+同端口，需要在Traccar服务端配置CORS规则，允许你的前端源访问，前端加任何请求头都无法绕过浏览器的跨域限制。
凭据正确性：确认服务端没有修改默认的admin账号密码，若修改过请替换为实际的邮箱、密码值。
连通性问题：先本地用curl/Postman调用对应接口确认服务本身可正常访问，排除网络、端口映射、防火墙的问题。
调用成功后接口会返回当前登录用户的信息，同时写入会话Cookie，后续所有接口请求只要保持withCredentials: true就会自动携带会话状态，不需要重复登录。

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