1319837080@qq.com
1319837080@qq.com
  • 发布:2019-02-23 01:23
  • 更新:2019-07-24 09:33
  • 阅读:4607

关于uniapp项目发布h5版的跨域问题

分类:uni-app

在使用uniapp开发的项目发布H5版时调用第三方api遇到了跨域问题,但是官方文档只说要后端服务器来解决这个跨域问题,(这个方案只适合前后端都是自己开发的,可以自己修改后端的前提下,但是如果是请求第三方api呢?发布到服务器后,这个h5项目相对于第三方api接口来说还是前端啊)
【重点】H5版项目调用第三方api接口的跨域问题怎么在前端解决?
比如mui就有前端的解决方案,例如Jsonp,那我们uniapp要怎么解决呢?还是在h5端没办法在前端解决调用第三方api遇到的跨域问题呢?

2019-02-23 01:23 分享
已邀请:
touch1201@163.com

touch1201@163.com

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: () => {}
});

深海智行

深海智行 - 专注前端培训

跨域是浏览器限制这和uniapp有什么关系呢?
你js随便用,谁阻止你用jsonp了?
你还指望uniapp帮你怼天怼地怼浏览器?

785349471@qq.com

785349471@qq.com

你好,请问跨域问题解决了吗?怎么解决的,求告方法

incess

incess - 米萨科技,长期合作项目,QQ微信同号 1410323850

判断,H5环境下使用jsonp。这个就是浏览器的问题 不是uniapp的问题

要回复问题请先登录注册