简单体验了下uni-app,vue的语法,很好用,中间遇到了一些小问题,也一一排除了~细数下遇到的问题及如果解决的.

1.跨域问题(马虎导致)

(1)我的后端接口配置了跨域响应头信息; (2)nginx同样配置了跨域

                add_header 'Access-Control-Allow-Origin' '*' always;
                add_header 'Access-Control-Max-Age' '3600' always;
                add_header 'Access-Control-Allow-Methods' "POST, GET, OPTIONS, DELETE, PUT" always;
                add_header 'Access-Control-Allow-Headers' "Origin, X-Requested-With, Content-Type, Accept,timestamp,token,signi,token_source" always;
                add_header 'Access-Control-Allow-Credentials' 'true';

导致了前端报错,大概信息是重复的跨域头信息,于是我将nginx的跨域配置注释.结果无论如何还是不行;最后发现了这么一行代码;

if ($request_method = 'OPTIONS' ) {
                        return 200;
                }

直接就把OPTIONS请求拦截下来了,所以获取不到跨域的信息,注释后成功;

2.封装的请求工具,在回调中无法跳转其他页面

错误写法:

uni.redirectTo({'/pages/login/login.vue'})

正确写法:

uni.redirectTo({'/pages/login/login'})

#3.变更的本地缓存localStorage,需要刷新页面才能获取 出问题的代码:

var header = {
	'content-type': 'application/x-www-form-urlencoded',
       'token': loginTool.getToken();
}

然后是请求的部分代码:

function request(url, params, method, onSuccess) {
	checkLogin(url);

	let timestamp = new Date().getTime();
	let sign = md5.hex_md5(timestamp + "xxx");
	header.timestamp = timestamp;
	header.sign = sign;

	uni.showLoading({
		title: "加载中...",
	})
	uni.request({
		url: baseUrl + url,
		data: dealParams(params),
		method: method,
		header: header,
		success: function(res) {

可以看到,我将需要发送请求的token缓存到了本地,但是却单独封装到了外面的变量;导致每次发起request请求,都是拿的第一次初始化的值...所以修改如下:

function request(url, params, method, onSuccess) {
	checkLogin(url);

	let timestamp = new Date().getTime();
	let sign = md5.hex_md5(timestamp + "xxx");
	header.timestamp = timestamp;
	header.sign = sign;
	header.token = loginTool.getToken();

小工具效果(简陋到家,另外不建议sql注入方式):

本文由 GY 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: 2021/12/21 15:40