Axios.get返回JSON返回数据的纯html接口。

基础概念

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js。它可以帮助你轻松地从浏览器发出 HTTP 请求，同时也支持拦截请求和响应、转换请求和响应数据等。

相关优势

1. 基于 Promise：Axios 使用 Promise API，使得异步操作更加简洁和易于管理。
2. 拦截器：可以在请求或响应被处理之前拦截它们，进行一些预处理或后处理。
3. 自动转换 JSON 数据：Axios 会自动将响应数据转换为 JSON 格式。
4. 客户端支持防御 XSRF：Axios 会自动处理跨站请求伪造（XSRF）保护。

类型

Axios 支持多种类型的 HTTP 请求，包括 GET、POST、PUT、DELETE 等。

应用场景

Axios 广泛应用于各种需要与后端进行数据交互的前端项目中，例如获取数据、提交表单、上传文件等。

问题描述

当你使用 Axios.get 请求一个接口时，期望返回 JSON 数据，但实际返回的是纯 HTML 内容。

原因

1. 接口返回类型错误：后端接口可能配置错误，返回了 HTML 而不是 JSON。
2. 请求路径错误：请求的 URL 可能不正确，导致访问了错误的资源。
3. 跨域问题：如果前端和后端不在同一个域，可能会因为跨域问题导致返回 HTML（例如重定向到登录页面）。

解决方法

1. 检查接口返回类型：
   • 确保后端接口正确配置，返回 JSON 数据。
   • 可以在后端日志中查看接口返回的内容，确认是否为 HTML。

• 检查请求路径：
  • 确认请求的 URL 是否正确，可以通过浏览器开发者工具查看请求的详细信息。
• 处理跨域问题：
  • 如果存在跨域问题，可以在后端配置 CORS（跨域资源共享），允许前端域名访问。
  • 使用代理服务器转发请求，避免跨域问题。

示例代码

import axios from 'axios';

axios.get('https://example.com/api/data')
  .then(response => {
    console.log(response.data); // 期望返回 JSON 数据
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

参考链接

• Axios 官方文档

如果你遇到具体的错误信息或返回的 HTML 内容，可以进一步分析问题所在，并采取相应的解决措施。