uni-app请求接口跨域

旧城等待， 2023-01-23 03:52 76阅读 0赞

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

服务器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  
而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数据的代码就不写啦

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]

[4bf3fcfa2460b28a1ea26d21a65a384b.png]: /images/20221004/32f1933941f3462aaa7867179955d92d.png
[940877fdf41a577204489ee56625acd6.png]: /images/20221004/a27933329eea4aeebb8372e86fd2900f.png
[e6a1f0b8009a2b02ced25dbee5fe7b0e.png]: /images/20221004/ecc388aadd994056a88a73107d27427f.png
[f6801e9f0b7010812984083b6ec50919.png]: /images/20221004/cbda4ca142e04b4faf0d53b0c5d6a9b6.png
[f8ac7697eaaea66896511a2c87c551cc.png]: /images/20221004/ac0b1b3841504536af08a1a9e8454bfc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]: /images/20221004/6a82b4eec9434a48b753d46040527aa4.png