光光i
光光i
  • 发布:2019-02-23 01:23
  • 更新:2020-11-18 11:20
  • 阅读:12684

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

分类:uni-app

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

2019-02-23 01:23 负责人:无 分享
已邀请:
incess

incess - 阿莫熊科技,长期合作项目,QQ微信同号 1410323850 专业团队为您解决问题

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

  • 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

深海智行

深海智行 - 专注前端培训

判断,H5环境下使用jsonp(不想手写可以直接使用这个)。这个就是浏览器的问题 不是uniapp的问题

  • 光光i (作者)

    uni.request发起的请求,和js有啥关系,uni.request前端这边咋解决跨域问题


    2019-02-25 15:59

  • 1***@qq.com

    回复 深海智行: 不懂别瞎几把回复


    2019-05-07 15:48

  • 一个网名

    拿出解决方案啊!!我用mui中的ajax很轻松就取了数据了,但是uniapp就是提示跨域,后台已经配置完了,怎么办??做前端培训总不能老是理论吧


    2020-04-21 11:48

  • 侠客请接刀s

    回复 光光i: 解决了吗


    2020-05-11 14:58

  • Yun_Max

    层主就是sb,叫了半天也没拿出解决方案


    2020-11-16 01:31

  • Yun_Max

    回复 一个网名: 做前端培训的,说实话这个做前端培训把爹笑死了


    2020-11-16 12:48

  • 二柱子

    你一个搞前端培训的就是这么教育学生的?遇到傻的学生就不能有点耐心。


    2020-11-18 11:16

7***@qq.com

7***@qq.com

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

乔珂粒i

乔珂粒i

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

j***@163.com

j***@163.com - 90后帅哥一枚

uniapp的jsonp是有问题的,需要解决window的问题

  • 深海智行

    H5支持,可以看一下我的视频教程《5行代码手写一个JSONP》


    2020-07-30 20:14

该问题目前已经被锁定, 无法添加新回复