uni-app之网络请求解决跨域

一：uniapp网络请求

第一步：新建uni-app项目

第二步：在npmjs中下载第三方包（用于请求）

安装步骤链接如下：

@escook/request-miniprogram - npm

1、打开uniapp项目的终端

输入

npm install @escook/request-miniprogram

执行完以上命令后项目根目录下会出现一下文件

 

2.在uniapp项目的main.js中引入

// 按需导入 $http 对象

import { $http } from '@escook/request-miniprogram'

// 在 uni-app 项目中，可以把 $http 挂载到 uni 顶级对象之上，方便全局调用

uni.$http = $http

3.配置网络请求根路径（在main.js中配置）

$http.baseUrl = 'https://www.xxxxxx.com' //该路径为示例路径，使用时请更换为自己的根路径

4.网络请求

在需要网络请求的页面中编写

dbgData(){
				let that = this;
				let param = {name:"xxx",address:"xxxxxxx"}
				const res = uni.$http.post('后端接口地址',param);
				res.then((r) => {
					console.log("rrr = ", r)
				})
			},

说明：dbgData()是请求点击事件，后端接口地址不要前面的根路径，因为前面已经配好了，所以这里不需要

5.运行项目，来调试我们的网络请求是否成功

注意：在没有配置代理的情况只能在真机上请求成功，因为真机上不会出现跨域的问题，那么，如果遇到跨域问题怎么解决，就是在网页上运行会报跨域的问题

前端解决办法：

1.在uniapp项目的根目录下的manifest.json中配置“h5”

代码如下：

 "h5" : {
        "title" : "h5",
		"devServer":{
			"proxy":{
				"/logistics":{
					"target":"http://101.34.73.225:9999"
				}
			}
		}
    }

添加以上代码，就可以在网页上请求后端接口

注意：之前我们在mian.js中配置了请求根目录，这时，当我们在网页上运行项目向后端发起请求时需要把配置的请求根路径注释掉，因为在配置代理的时候已经有了请求根路径。