股票交易otp接口-uni app学习笔记请求接口跨域问题八

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

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

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)
                    }
                })
            }
        }

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

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

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

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

解决办法：

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

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

回到当前页面，修改请求路径

 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)
                    }
                })

当前页面完整代码

文章为作者独立观点，不代表股票交易接口观点