uni-app运行到微信小程序发起请求失败

uni-app运行到微信小程序发起请求异常

  1）本地开发，uni-app运行到微信小程序如果出现请求发不出，先到右上角详情，找到本地设置，勾选不校验合法域名。如果还发现请求发不出来，看第二步。

  2）先看下本地uni-app请求代码：

<template>
	<view>
		<button type="primary" size="mini" @click="clickButton">get请求</button>
		<view>
			{{text}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				text: ''
			}
		},
		methods: {
			clickButton() {
				uni.request({
					url: '/api/books',
					method:'GET',
					success: (res) => {
								console.log(res.data);
								this.text = 'request success';
						}
				})
			}
		}
	}
</script>

<style>

</style>

  3）微信小程序request方法不需要考虑跨域访问问题，因为微信小程序的做法是由他们的后台取访问我们的后台，所以实际的“跨域问题”已经在我们的小程序与微信后台交流的时候解决了。而上面的代码是为了解决H5端跨域的问题采用的请求方式，不是一个完整的请求（没有http协议主机端口，走了代理），导致请求发不出去。

  4）解决方案：借助api的条件编译 #ifdef 微信小程序需要完整的接口地址

<template>
	<view>
		<button type="primary" size="mini" @click="clickButton">get请求</button>
		<view>
			{{text}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				text: ''
			}
		},
		methods: {
			clickButton() {
				// #ifdef H5
				uni.request({
					url: '/api/books',
					method:'GET',
					success: (res) => {
								console.log(res.data);
								this.text = 'request success';
						}
				})
				// #endif
				
			  // #ifdef MP-WEIXIN
				uni.request({
					url: 'http://localhost:3000/books',
					method:'GET',
					success: (res) => {
								console.log(res.data);
								this.text = 'request success';
						}
				})
				// #endif
			}
		}
	}
</script>

<style>

</style>

  效果如下：