vue3中axios访问后端接口报错

Question

1、首先访问Yapi接口没有报错

2、换成本地的IDEA的接口就报错了

不知道为啥
接口的内容都是一致的

Answer 1

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

从你的描述和错误信息来看，这个问题可能涉及到以下几个方面：

1. 跨域问题（CORS）

当你尝试访问本地接口时，可能会遇到浏览器的同源策略限制，导致网络请求失败。如果你的前端 Vue 应用和后端接口不在同一个域名下，浏览器会阻止这种跨域的请求。虽然访问 Yapi 接口没有问题，可能是 Yapi 接口已经设置了合适的 CORS 策略。

解决方案：

• 确保你的本地后端接口已经设置了允许跨域请求的头信息。这通常需要在后端代码中设置，具体取决于你使用的后端技术。
• 在开发阶段，你也可以在浏览器控制台中临时关闭同源策略限制，或者使用代理服务器来绕过这个问题。

2. 接口地址和端口

请确认本地接口的地址和端口是否正确。错误信息中并没有明确的地址信息，所以需要检查一下 axios.get 请求中的 URL 是否正确。

3. 请求参数问题

如果本地接口需要特定的请求参数（如认证信息、API key等），而你在发送请求时没有提供这些参数，也可能会导致请求失败。

4. 响应格式问题

关于图3的内容，看起来像是接口返回的数据格式有问题。在返回的对象中，"name" 和 "createTime"、"updateTime" 等字段没有用逗号分隔，这会导致解析 JSON 时出错。正确的 JSON 格式应该是每个对象都用逗号分隔，并且每个键值对之间用冒号分隔。

解决方案：

• 检查后端接口返回的数据格式是否正确。
• 在前端代码中，确保正确处理接口返回的数据。

代码样例

假设你的后端接口已经设置了 CORS，并且返回的数据格式是正确的 JSON 格式，你可以尝试以下代码来发送请求并处理响应：

mounted() {
  axios.get("http://localhost:你的端口号/depts")
    .then(response => {
      // 假设 response.data 是正确的 JSON 格式
      this.tableData = response.data;
    })
    .catch(error => {
      console.error("请求失败:", error);
    });
}

请根据你的实际情况调整代码中的 URL 和端口号，并确保后端接口返回的数据格式是正确的 JSON 格式。如果问题仍然存在，建议进一步检查和调试前端代码以及后端接口设置。