楠槡

Vue/.Net 开发微信H5页面问题笔记

2019-10-18

帮朋友开发微信H5分享统计系统,也算是自己从头开始写的第一个Vue 项目,遇到不少坑,记录一下。

Vue-Router History模式下 Build 之后访问异常

Vue-Router 的默认模式为 hash 模式,会在链接中加上一个 # ,非常难看,使用 history 模式后,则可以去除。

修改方式为在,/router/index.js中 修改:

1
2
3
4
5
const router = new VueRouter({
mode: 'history', //指定模式为 history 模式
base: process.env.BASE_URL,
routes
})

在本地测试时一切正常,但是build 后发布到服务器,需要为 nginx 添加一条 localtion 记录。

1
2
3
4
5
location / {
root /usr/share/nginx/html/h5share;
index index.html index.htm;
try_files $uri $uri/ /index.html; #添加try_files 后正常
}

微信授权跨域问题

第一次开发,参考网上的教程,直接纯前端获取了微信的 access_token 实际上是不可取的
导致在发布上线后,立即出现了跨域的问题

code和 access_token 都应该由后端获取并缓存。

token要放在服务器就会解决跨域问题,同时补充下为什么要放到服务器生成:

  • 微信对token的生成获取是有次数限制的,每个客户端单独获取,很容易超过限制。每日获取token的限制是2000次。
    详细内容:接口频率限制说明

  • access_token(有效期7200秒,开发者必须在自己的服务全局缓存access_token)
    某一个客户端新生成一个token后,其他的客户端的token都会失效
    官方解释:如果第三方不使用中控服务器,而是选择各个业务逻辑点各自去刷新access_token,那么就可能会产生冲突,导致服务不稳定。

引用自segmentfault

.Net Core 开启 Cors 跨域

直接在 startup.cs 中配置,注意在 MVC之前

在ConfigureServices 中注册 Cors

1
2
3
4
services.AddCors(options =>
options.AddPolicy("AllowRequest",
p => p.AllowAnyOrigin()) //允许所有跨域请求
);

在Configure 中使用 Cors

1
app.UseCors("AllowRequest");

Axios 与 Web API 通讯

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
let getAccessUrl = `http://leepush.azurewebsites.net/api/weixin/getAccessToken?code=${code}`
//loading
const loading = this.$loading()
let _that = this
axios
.get(getAccessUrl)
.then(response => {
console.info(response)
_that.userinfo = response.data
loading.close()
//add user to sys
let adduserUrl = `http://leepush.azurewebsites.net/api/weixin/AddUserToSys`
axios
.post(adduserUrl, {
"nickname": _that.userinfo.nickname,
"openid": _that.userinfo.openid,
"headimgurl": _that.userinfo.headimgurl
})
.then(re => {
console.info(re)
})
})
.catch(error => console.error(error))
Tags: Vue
使用支付宝打赏
使用微信打赏

若你觉得我的文章对您有帮助,点击上方按钮请我喝杯咖啡☕

若文章中存在问题,或您有任何意见和疑问,均可与我联系

扫描二维码,分享此文章 📱