uni-app学习笔记-请求接口跨域问题(八)

5640239-9d8b6d98050bd4a0.png

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

服务器图片:http://www.intmote.com/star.png

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

methods: {
             getList() {
                uni.downloadFile({
                    url: 'http://www.intmote.com/star.png',
                    success: (res) => {
                       console.log(res);
                        this.imageSrc = res.tempFilePath;
                        uni.hideLoading();
                    },
                    fail: (err) => {
                        console.log('downloadFile fail, err is:', err)
                    }
                })
            }
        }

会发现控制台报错,遇到了跨域的问题了


5640239-f256fc9c6bcb7941.png

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

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

解决办法:

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


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

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

 uni.downloadFile({
                    url: '/api/star.png',
                    success: (res) => {
                       console.log(res);
                        this.imageSrc = res.tempFilePath;
                        uni.hideLoading();
                    },
                    fail: (err) => {
                        console.log('downloadFile fail, err is:', err)
                    }
                })

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

<template>
    <view>     
        <view class="uni-padding-wrap uni-common-mt">
            <image class="img" v-if="imageSrc" :src="imageSrc" mode="center" />
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {              
                imageSrc: ''
            }
        },
        onLoad() {
                   this.getList();
               },
        methods: {
             getList() {
                uni.downloadFile({
                    url: '/api/star.png',
                    success: (res) => {
                       console.log(res);
                        this.imageSrc = res.tempFilePath;
                        uni.hideLoading();
                    },
                    fail: (err) => {
                        console.log('downloadFile fail, err is:', err)
                    }
                })
            }
        }
    }
</script>
<style>
.img {
    width: 500upx;
    height: 500upx;
    margin: 0 95upx;
}
</style>

4:运行,跨域问题解决,图片就可以显示了


5640239-745e596bae068746.png

欢迎关注【编程微刊】公众号,回复【领取资源】,500G编程学习资源干货免费送。


5640239-6689c93cf145fe8b.png
相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值