玩了下uni-app,马虎导致踩坑...

/ 前端 / 没有评论 / 452浏览

简单体验了下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注入方式):

alt

alt