遇到一个非常非常奇怪的问题
uniapp的跨域问题。没想到21世纪了居然有这么离谱的东西存在。
前端uniapp端口用本地的8080
后端端口用本地的8088
下面的代码在我vue项目里都是没有问题的，反而在uniapp里出了笑话，有人跟我说是这两个页面的代码冲突了
baseURL设为“”就行，很可惜不行。
好了话不多说直接上代码：跨域设置
"h5" : {
"devServer" : {
"port" : 8080,
"disableHostCheck": true,
"https" : false,
"proxy" : {
"/api" : {
"target" : "http://192.168.18.43:8088",
"changeOrigin" : true,
"secure" : false,
"pathRewrite" : {
"^/api" : ""
}
}
}
},
"title" : "抽奖信息采集",
"router" : {
"mode" : "hash"
}
}
还有就是我的axios设置https.js
import axios from "axios";
// 创建自定义接口服务实例
const http = axios.create({
baseURL: 'http://192.168.18.43:8088',//根据个人后端情况，修改此处baseURL
timeout: 6000, // 不可超过 manifest.json 中配置 networkTimeout的超时时间
withCredentials: true,
headers: {
'Content-Type': 'application/json',
//'X-Requested-With': 'XMLHttpRequest',
},
})
// 拦截器 在请求之前拦截 添加token
http.interceptors.request.use(config => {
//请求前有关处理逻辑
return config
})
// 响应后的拦截
http.interceptors.response.use(response => {
//响应拦截处理逻辑
return response;
}, error => {
return Promise.reject(error.message)
})
export default http
源于chatGPT仅供参考
跨域问题在前端开发中是一个常见的挑战，而uni-app作为一种跨平台的开发框架，也需要处理跨域请求。下面是一些建议来解决uni-app中的跨域问题：
1. 在`manifest.json`文件中配置`h5`字段下的`devServer`属性，用于配置开发环境下的跨域请求。
```json
"h5": {
"devServer": {
"disableHostCheck": true,
"proxy": {
"/api": {
"target": "http://192.168.18.43:8088",
"changeOrigin": true,
"secure": false,
"pathRewrite": {
"^/api": ""
}
}
}
}
}
请确保配置中的target值与后端服务器的地址和端口相匹配。这样，当你在uni-app中发起以/api开头的请求时，就会被代理到目标服务器。
import axios from "axios";
const http = axios.create({
baseURL: '/api', // 使用"/api"作为基础URL
timeout: 6000,
withCredentials: true,
headers: {
'Content-Type': 'application/json',
},
});
// 省略拦截器代码
export default http;
通过设置基础URL为/api，请求将会被代理到后端服务器。
请确保在uni-app中使用axios发送请求时，使用相对路径而不是绝对路径来发起请求。
如果以上方法仍然无法解决跨域问题，请提供更多的详细信息，以便我们能够更好地帮助您。
```
哈哈 我也碰到过 我直接在host里面配置的
跨域问题是在前端开发中常见的挑战，UniApp也需要正确配置以解决跨域访问的问题。根据您提供的代码，我注意到您在UniApp的配置中设置了代理来解决跨域问题。然而，有几个可能的原因导致您的配置无法正常工作。
首先，请确保您的后端服务器正在监听并运行在http://192.168.18.43:8088上。如果后端服务器未正确运行或无法访问，那么无论前端如何配置代理，都无法解决跨域问题。
另外，UniApp中的跨域配置略有不同。请尝试按照以下方式进行调整：
"h5": {
"devServer": {
"disableHostCheck": true,
"port": 8080,
"https": false,
"proxy": {
"/api": {
"target": "http://192.168.18.43:8088",
"changeOrigin": true,
"pathRewrite": {
"^/api": ""
}
}
}
},
"title": "抽奖信息采集",
"router": {
"mode": "hash"
}
}
请注意，此配置位于vue.config.js或uni.scss文件中。
如果问题仍然存在，请确保您的后端服务器已配置允许来自UniApp的跨域请求。您可以在后端服务器的响应头中添加Access-Control-Allow-Origin来允许指定来源的跨域请求。例如，在您的后端代码中添加以下行：
header("Access-Control-Allow-Origin: http://localhost:8080");
将http://localhost:8080替换为您UniApp运行的地址和端口。
如果问题仍然持续存在，请提供更多的错误信息或控制台日志，以便我能够更好地帮助您解决问题。
不知道你这个问题是否已经解决, 如果还没有解决的话:根据提供的参考资料和问题描述，以下是解决uniapp中跨域问题的步骤：
步骤1: 在uniapp项目中，创建一个名为https.js的文件，并将以下代码复制到该文件中：
const baseURL = "http://localhost:8088" // 后端接口的地址，根据实际情况进行修改
export default function (url, data, method = "GET") {
return new Promise((resolve, reject) => {
uni.request({
url: baseURL + url,
data,
method,
header: {
"Content-Type": "application/json" // 根据后端接口的要求进行设置
},
success: (res) => {
resolve(res.data);
},
fail: (err) => {
reject(err);
}
});
});
}
步骤2: 在需要进行跨域请求的地方，比如在某个页面的<script>标签中，引入https.js并使用封装的uni.request函数发送请求。
// 引入https.js
import https from '路径/https.js';
// 跨域请求示例
https("/api/xxx", { // 请求的接口地址，根据实际情况进行修改
method: "POST",
data: {
// 请求参数，根据接口要求进行设置
}
}).then((res) => {
// 请求成功，处理返回的数据
console.log(res);
}).catch((err) => {
// 请求失败，处理错误信息
console.error(err);
});
步骤3: 在manifest.json文件中配置跨域规则。
{
"mp-weixin": {
"appid": "xxx",
"miniprogramRoot": "dist/",
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
},
"cloud": true,
"minicloud": {
"origin": [
"http://localhost:8088" // 添加后端接口地址，根据实际情况进行修改
]
}
}
}
需要注意的是，以上步骤中的接口地址、请求参数等根据实际情况进行修改。
希望以上解决方案能够帮助到你解决uniapp中的跨域问题。如果还有其他疑问或需要进一步帮助，请随时追加提问。