uni-app请求接口跨域

需求:发起一个请求,请求到服务器上的json数据,显示在前端界面

服务器json数据:http://www.xxx.com/test.json(个人域名不方便展示,用xxx代替隐藏)
数据是这样的,直接可以在浏览器访问到。

写代码:直接请求服务器接口的时候

<template>
    <view>
        <view class="cu-list menu-avatar">
            <view class="cu-item" v-for="(item,index) in productList" :key="index">
                <view class="">
                    <button v-if="item.isLeave === 0" @click.stop="isLeave()">离厂解绑</button>
                    <view v-else class="text-grey text-xs">{{item.leaveTime }}</view>
                </view>

            </view>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                productList: [],
            };
        },
        onLoad() {
            this.getList();
        },
        methods: {
            getList() {
                /* this.$request.get('/api/test.json', {
                    
                }).then(res => {                
                    // 打印调用成功回调
                    console.log(res)
                    this.productList = res.data.rows;
                }) */
                uni.request({
                    url: 'http://www.ixxx.com/test.json',
                    success: (res) => {
                        console.log(res.data);
                        this.itemList = res.data.rows;
                    }
                });
            },
        },



    }
</script>
<style>
    page {
        padding-top: 50px;
    }

    .header {
        position: absolute;
        top: 0;
        height: 44px;
        width: 100%;
        line-height: 50px;
        background-color: rgb(45, 47, 186);
        color: #fff;
    }

    .header text {
        display: inline-block;
        text-align: center;
    }

    .cu-bar.fixed,
    .nav.fixed {
        top: 45px;
    }

    .cu-list.menu-avatar>.cu-item {
        height: 92px;
        margin: 10px;
        box-shadow: 0 2px 5px -1px #c4c0c0;
    }
</style>

这里是出现了跨域问题的哦

那么前端该怎么去解决跨域问题?

想到之前写vue项目的时候,遇到过一次https://www.jianshu.com/p/b28cd8290b2a
而uniapp是基于vue的,那么解决办法应该也是差不多的

解决办法:

1:打开manifest.json文件,选择源码视图,在里面添加proxy代理

"devServer": {
                    "proxy": {
                        "/api": {                    
                            "target":"http://www.ixxxx.com",
                            "changeOrigin": true,//是否跨域
                            "secure": false,// 设置支持https协议的代理
                             "pathRewrite":{"^/api":"/"}
                        }
                    }
                },

2:回到当前页面,修改请求路径

getList() {
                uni.request({
                    url: '/api/test.json',
                    success: (res) => {
                        console.log(res.data);
                    }
                });
            },

3:当前页面完整代码(仅供参考)

<template>
    <view>
        <view class="cu-list menu-avatar">
            <view class="cu-item" v-for="(item,index) in productList" :key="index">
                <view class="">
                    <button v-if="item.isLeave === 0" @click.stop="isLeave()">离厂解绑</button>
                    <view v-else class="text-grey text-xs">{{item.leaveTime }}</view>
                </view>

            </view>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                productList: [],
            };
        },
        onLoad() {
            this.getList();
        },
        methods: {
            getList() {
                uni.request({
                    url: '/api/test.json',
                    success: (res) => {
                        console.log(res.data);
                    }
                });
            },
        },

    }
</script>
<style>
    page {
        padding-top: 50px;
    }

    .header {
        position: absolute;
        top: 0;
        height: 44px;
        width: 100%;
        line-height: 50px;
        background-color: rgb(45, 47, 186);
        color: #fff;
    }

    .header text {
        display: inline-block;
        text-align: center;
    }

    .cu-bar.fixed,
    .nav.fixed {
        top: 45px;
    }

    .cu-list.menu-avatar>.cu-item {
        height: 92px;
        margin: 10px;
        box-shadow: 0 2px 5px -1px #c4c0c0;
    }
</style>

4:运行,跨域问题解决,json数据请求到了,
就可以显示了

这里说的是在uni-app项目里面前端如何解决一下跨域问题
渲染json数据的代码就不写啦

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值