uni-app请求接口跨域

落日映苍穹つ 2022-10-12 04:16 146阅读 0赞

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

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

![4bf3fcfa2460b28a1ea26d21a65a384b.png][]

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

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

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

![940877fdf41a577204489ee56625acd6.png][]

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

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

解决办法：

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

![e6a1f0b8009a2b02ced25dbee5fe7b0e.png][]

"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数据请求到了，  
就可以显示了

![f6801e9f0b7010812984083b6ec50919.png][]

![f8ac7697eaaea66896511a2c87c551cc.png][]

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

[http_www.xxx.com_test.json]: https://links.jianshu.com/go?to=http%3A%2F%2Fwww.xxx.com%2Ftest.json%28
[4bf3fcfa2460b28a1ea26d21a65a384b.png]: /images/20221005/431c926134d34016ab744f3b4b4ff499.png
[940877fdf41a577204489ee56625acd6.png]: /images/20221005/a2c1706912924924ad0fdce0f355d13a.png
[https_www.jianshu.com_p_b28cd8290b2a]: https://www.jianshu.com/p/b28cd8290b2a
[e6a1f0b8009a2b02ced25dbee5fe7b0e.png]: /images/20221005/2fd838b6364d41bb923824d0de7543eb.png
[f6801e9f0b7010812984083b6ec50919.png]: /images/20221005/2fa2b133557a4223aff8c519c6bf386a.png
[f8ac7697eaaea66896511a2c87c551cc.png]: /images/20221005/af3902e7b0a64dd4bc1328cfa6dce2bf.png