这几年,uniapp是一个很火的工具,它可以只写一份代码就可以在多端使有。然而,在使用uniapp开的时候,总会遇上跨域的问题。
1、使用 HBuilder X 工具运行项目,找到 manifest.json 文件,把下面的的代码复制到你的项目中,注意修改你的url地址

"h5" : {
       "devServer" : {
           "https" : false,
		"proxy": {
					"/dpc": {
						"target": "http://www.test.bnc:82",
						"changeOrigin": true,
						"secure":false,
						"pathRewrite": {
							"^/dpc": ""
						}
					}
				}
       }
   }

2、在项目根目录下新建一个http目录,再在该目录下新建一个http.js 文件。贴上下面的代码

var BASE_URL = 'http:XXXXXX:9088';    //不是h5默认这个地址
// #ifdef H5
BASE_URL = '/dpc';    //H5下将地址修改为/dpc
// #endif

//console.log(BASE_URL,'这个地址是啥');
//console.log('aaaaaaaaaaaaaaaa')
export default ({
	url,
	method,
	data,
	header
})=>{
	return new Promise((resolve,reject)=>{
		uni.request({
			url:BASE_URL + url,
			method:method,
			timeout:5000,
			dataType:'json',
			responseType:'text',
			data:data,
			withCredentials:true,
			header:{
				'content-type':'application/x-www-form-urlencoded' //需要注意这儿,如果不是这种格式,那么在php语言的后端,它是获取不到post过来的参数
			},
			success(e) {
				//console.log(e)
				resolve(e.data)
			},
			fail(e) {
				reject(e)
			}
		})
	})
}
//如果要封装文件上传的方法,原理是一样的
var BASE_URL = 'http:XXXXXX:9088';    //不是h5默认这个地址
// #ifdef H5
BASE_URL = '/dpc';    //H5下将地址修改为/dpc
// #endif

//console.log(BASE_URL,'这个地址是啥');
//console.log('aaaaaaaaaaaaaaaa')
export default ({
	url,
	file,
	name,
	header
})=>{
	return new Promise((resolve,reject)=>{
		uni.uploadFile({
			url:BASE_URL + url,
			file:file,
			name:name,
			header:{},
			success(e) {
				resolve(e)
			},
			fail(e){
				reject(e)
			}
		})
	})
}

3、在页面上使用,在pages/index/index.vue文件中,贴上

import http from '../../http/http.js'; //引入刚那http.js的地址
methods: {
	req(){
		let d = {id:1,goodsName:'苹果',num:30};
		console.log(d)
		http({
			url:'/index.php?act=add',
			method:'POST',
			data:d,
		})
		.then(res=>{
			console.log(res);
		})
	},
},

上面就是uniapp需要写入的部份,由于我后端是使用php语言开发。所以,在这儿我也附上我php的代码,php也遇好做上跨域处理。以tp6为例,这儿有两种解决方案。
1、在入口文件处添加以下代码

header('Content-Type: text/html;charset=utf-8');
header('Access-Control-Allow-Origin:*'); 
header('Access-Control-Allow-Methods:POST,GET,OPTIONS,DELETE');
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Headers: Content-Type,Content-Length,Accept-Encoding,X-Requested-with, Origin');

2、直接在中间件中写入这么一行代码

\think\middleware\AllowCrossDomain::class,   //文件目录  项目根目下/app/middleware.php 文件

这两个方法各取一个。当然,如果为了保险起见,也可以都写上,也没啥毛病。
在这儿我也就多插一句,如果说对于php获取不到前端post过来的值的时候,可以试试下面的方法

$post = file_get_contents("php://input");
var_dump($post); //这下就能获取到前端post过来的值了。原因就是在前端的请求头里没没有配置
//所以,对于前端的js而已,请求头一样也很重要 (js代码如下)
header:{
	'content-type':'application/x-www-form-urlencoded' //所以,我在上面也反复强调了
}
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐