uni-app请求接口跨域问题

心已赠人 2022-12-05 13:56 344阅读 0赞

![c8e31c123737bb2eeebf41384aedac2c.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)
                        }
                    })
                }
            }

会发现控制台报错，遇到了跨域的问题了  
![37cd1d54f8f5155f2feb5df69a3a8d5d.png][]

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

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

\#\#\#\#解决办法：  
1：打开manifest.json文件，选择源码视图，在里面添加proxy代理  
![63fa621c3a9601e1102b1445c5481578.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：运行，跨域问题解决，图片就可以显示了  
![20ec5bda2f7de0670ac35a1822404c8a.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center][]

[c8e31c123737bb2eeebf41384aedac2c.png]: /images/20221123/8da2c36ba7ce4ae8ba6a843511c714f2.png
[37cd1d54f8f5155f2feb5df69a3a8d5d.png]: /images/20221123/404e802f51e74771a33bdaf3746dfcb1.png
[63fa621c3a9601e1102b1445c5481578.png]: /images/20221123/1d5bf1a889ad499cb3d618f5eb78247f.png
[20ec5bda2f7de0670ac35a1822404c8a.png]: /images/20221123/bffe8ab7f4a547f7a4afde8a3b73411a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/a63f6d7ff49b47a6b27669abecad4e0a.png