vue3 axios post 失败

Question

vue3 axios 登录 post 失败
axios get 获取数据是成功的。

---

错误信息：
浏览器未向后端发起网络请求

:7777/login:1 
 Uncaught (in promise) 
{username: Array(1), password: Array(1)}
password: Array(1)
0: {message: '请输入密码', fieldValue: '', field: 'password'}
length: 1
[[Prototype]]: Array(0)
username: Array(1)
0: {message: '请输入用户名', fieldValue: '', field: 'username'}
length: 1
[[Prototype]]: Array(0)
[[Prototype]]: Object

---

登录方法：

const login = async () => {
  try {
  await form.value.validate()
  const res = await userLoginService(formModel.value)
  userStore.setToken(res.data.token)
  ElMessage.success('登录成功')
  router.push('/')
  } catch (error) {
    console.error('Error fetching data:', error)
  }
}

---

登录接口：

//登录接口
export const userLoginService = ({ username, password }) => {
  try {
  return request.post('/admin/empaccount/login', { username, password })
  } catch (error) {
    console.error('Error fetching data:', error)
  }
}

---

前端代理：

  //前端服务配置修改
  server: {
    host: '0.0.0.0', //服务启动地址
    port: 7777, //服务启动端口
    open: true, //启动后是否打开浏览器
    proxy: {
      '/api': {
        target: 'http://localhost:8888/',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }

---

swagger post 后端 成功
post 地址 /admin/empaccount/login
请求：

{
  "username": "admin",
  "password": "123456"
}

响应：

{
  "code": 1,
  "msg": null,
  "data": {
    "id": 1,
    "userName": "admin",
    "name": null,
    "token": "eyJhbGciOiJIUzI1NiJ9.eyJlbXBJZCI6MSwiZXhwIjoxNzE1MDgyMzA4fQ.OYalOHrwmf9Xz1_IChAVHMggpeia_5XHsF_8_kyjMtA"
  }
}

Answer 1

引自免费微信小程序：皆我百晓生

看起来你在Vue3项目中使用axios进行POST请求时遇到了问题。根据提供的信息，问题可能出在验证失败、参数传递、或是前端代理设置上。让我们一步步排查解决。

首先，检查登录表单的验证逻辑。确保它正确处理了输入字段，并且只有当所有必填项都填写完整时才允许提交。这里是一个简单的示例，你可以根据实际需求调整：

const validateForm = () => {
  let errors = {
    username: [],
    password: [],
  };

  if (!formModel.value.username) {
    errors.username.push({ message: '请输入用户名', fieldValue: '', field: 'username' });
  }

  if (!formModel.value.password) {
    errors.password.push({ message: '请输入密码', fieldValue: '', field: 'password' });
  }

  return Object.values(errors).every(arr => arr.length === 0);
};

然后更新登录方法：

const login = async () => {
  if (validateForm()) {
    try {
      const res = await userLoginService(formModel.value);
      userStore.setToken(res.data.token);
      ElMessage.success('登录成功');
      router.push('/');
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  } else {
    console.error('表单验证失败:', errors); // 打印错误信息到控制台
  }
};

接着，确认前端代理配置是否正确。看起来你已经设置了代理，用于将/api开头的请求转发到http://localhost:8888/。如果你的API路径不是以/api开头，你需要相应地调整这个路径。

对于登录接口，确保在发送POST请求时，使用正确的参数对象：

// 登录接口
export const userLoginService = ({ username, password }) => {
  try {
    return axios.post('/admin/empaccount/login', { username, password }, {
      headers: {
        'Content-Type': 'application/json',
      },
    });
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

上述更改应该能解决大部分常见的问题。如果仍然存在问题，建议在浏览器开发者工具的“网络”标签页中检查是否有POST请求发出，以及请求头、请求体等信息是否与Swagger中的示例匹配。

另外，确保你的Vue项目和后端服务器在同一开发环境下运行，或者调整跨域策略以允许来自不同源的请求（CORS）。这可以通过在后端服务器上添加适当的CORS中间件来实现。

如果以上步骤都无法解决问题，请提供更详细的调试信息，包括请求和响应的详细日志，以便进一步分析。