在使用uniapp开发的项目发布H5版时调用第三方api遇到了跨域问题，但是官方文档只说要后端服务器来解决这个跨域问题，（这个方案只适合前后端都是自己开发的，可以自己修改后端的前提下，但是如果是请求第三方api呢？发布到服务器后，这个h5项目相对于第三方api接口来说还是前端啊）
【重点】H5版项目调用第三方api接口的跨域问题怎么在前端解决？
比如mui就有前端的解决方案，例如Jsonp，那我们uniapp要怎么解决呢？还是在h5端没办法在前端解决调用第三方api遇到的跨域问题呢？
光光i
- 发布：2019-02-23 01:23
- 更新：2020-11-18 11:20
- 阅读：13009
1、找到manifest.json文件用其他编译器打开代码视图
修改：
"h5" : {
"devServer" : {
"port" : 8000,
"disableHostCheck" : true,
"proxy" : {
"/api" : {
"target" : "https://testapi.kemiandan.com", // 需要跨域的域名
"changeOrigin" : true,
"secure" : false,
"pathRewrite" : {
"^/api" : "" //匹配请求路径里面有 /api 替换成 https://testapi.kemiandan.com
}
}
}
},
}
创建js文件；
var url = 'http://m.maoyan.com/'
var api = 'api'
//获取测试数据
const ceshi = url + '/ajax/movieOnInfoList?token=';
const ceshi2 = api + '/ajax/movieOnInfoList?token='
//将接口暴露出去
export default {
ceshi:ceshi,//获取测试数据
ceshi2:ceshi2
}
将js文件挂在到实例上 main.js文件中
//引入接口文档
import api from "@/modules/api.js";
Vue.prototype.$api = api
请求数据：
uni.request({
url: this.$api.ceshi2,
method: 'GET',
data: {},
success: res => {
console.log(res)
},
fail: () => {},
complete: () => {}
});
1***@163.com
那就是 H5 用JSONP跨域 不用 官方的uni.request对吗 大佬
2019-12-18 09:56
incess
回复 1***@163.com: 跨域让后端解决，参考我的博文 https://my.oschina.net/incess/blog/3060511
2019-12-18 10:18
1***@163.com
回复 incess: 好的 谢谢
2019-12-19 10:13