vue请求不到数据，返回状态200，数据为html

Question

uni-app用uni.request发送请求。是哪一步缺了吗
第一次出现
Access to XMLHttpRequest at 'http://xxxxxxxxxxxxx/?Code=JG2626374656%27 from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
然后使了用代理服务器
重新发送请求，状态码200，但是返回了html，实际应返回数字“1”.

Answer 1

该回答引用ChatGPT4o, 并由本人整理回复, 如有帮助，还请采纳。
根据描述和提供的代码与返回结果，问题出现在以下几点：

---

1. 跨域问题 (CORS)

• 第一次问题： 跨域错误显示 Access-Control-Allow-Origin 未正确配置。
• 解决方案： 通过代理服务器规避了跨域限制。

但问题：代理后，返回的结果是 HTML 而非期望的 JSON 或纯文本。这意味着后端接口的处理或代理配置存在问题。

---

2. 返回 HTML 的原因分析

• 后端问题：
  1. 访问的 URL /api/getcode.aspx 实际没有正确返回目标数据，返回了 HTML 页面（如错误页面、重定向页面、未正确处理的页面）。
  2. 后端未正确解析传递的 Code 参数，导致返回默认的 HTML。
• 代理问题：
  如果你设置了代理，代理服务器可能转发请求时路径错误，或者代理目标配置错误，导致请求被转发到了一个 HTML 页面。

---

3. 解决思路

（1）检查代理配置

• 确保前端的 /api/getcode.aspx 请求能够被正确代理到目标服务器。
• 检查代理配置是否正确映射到了后端接口的真实地址。

Vue 的 vue.config.js 示例：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://真实的后端地址', // 后端接口的真实地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': '', // 去掉/api前缀
        },
      },
    },
  },
};

检查是否能正确代理：

1. 用浏览器或 Postman 直接请求 http://真实的后端地址/getcode.aspx，观察返回值是否正确。
2. 确保代理后的请求路径和后端路径匹配。

---

（2）检查后端接口

• 确认后端接口是否正确处理了 Code 参数：
  1. 如果 Code 参数格式错误，后端可能直接返回错误页面。
  2. 使用 encodeURIComponent 对 Code 进行了编码，确保后端能正确解码并处理。
• 确保后端返回的内容是期望的数字“1”，而不是 HTML 页面。

后端调试方法：

1. 在后端日志中打印接收到的 Code 参数，确认是否正确。
2. 确认后端接口返回的内容为数字 1，而不是其他内容。

---

（3）确认响应内容类型

• 后端应返回正确的 Content-Type，例如：
  • 返回 JSON 数据：Content-Type: application/json
  • 返回纯文本数据：Content-Type: text/plain
• 如果返回 HTML，前端会直接解析为 HTML。

后端代码示例：

Response.ContentType = "text/plain";
Response.Write("1");
Response.End();

---

（4）调试与排查流程

1. 测试真实后端接口：
   • 在代理绕过的情况下，直接请求后端接口。
   • 检查是否正确返回了目标内容，而不是 HTML 页面。
2. 测试代理请求：
   • 通过 uni.request 向代理服务器发送请求，观察返回结果。
   • 如果仍然是 HTML，说明代理未正确配置。
3. 修改返回类型：
   • 确保后端返回的 Content-Type 符合期望。
   • 如果后端返回 HTML 页面，检查后端逻辑。

---

4. 最终代码示例

前端代码

uni.request({
  url: '/api/getcode.aspx',
  data: {
    Code: encodeURIComponent(code), // 确保参数被正确编码
  },
  method: 'GET',
  success: (res) => {
    console.log('请求返回的数据:', res);
    if (res.statusCode === 200 && typeof res.data === 'string') {
      // 检查返回内容是否为预期数字
      console.log('返回的内容:', res.data);
    } else {
      console.error('返回数据格式错误:', res);
    }
  },
  fail: (err) => {
    console.error('请求失败:', err);
    uni.showToast({
      title: '请求失败',
      icon: 'none',
    });
  },
});

代理配置（vue.config.js）

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://真实后端地址', // 替换为后端服务器地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': '', // 去掉 /api 前缀
        },
      },
    },
  },
};

---

5. 常见问题和解决方案

问题	原因	解决方案
返回 HTML 页面	请求路径错误或后端处理逻辑异常	检查代理路径和后端逻辑
跨域错误	后端未设置 Access-Control-Allow-Origin	使用代理服务器或配置后端跨域
返回格式不符合预期（非 JSON 或数字）	后端未正确设置 Content-Type	确保后端返回 text/plain 或 application/json

---

按照上述步骤逐步排查问题，确认代理配置和后端接口逻辑，应该能解决返回 HTML 而非数字的问题。