Vue/.Net 开发微信H5页面问题笔记
- 2019 年 12 月 12 日
- 筆記
帮朋友开发微信H5分享统计系统，也算是自己从头开始写的第一个Vue 项目，遇到不少坑，记录一下。
Vue-Router History模式下 Build 之后访问异常
Vue-Router 的默认模式为 hash 模式，会在链接中加上一个 # ，非常难看，使用 history 模式后，则可以去除。
修改方式为在，/router/index.js中 修改：
const router = new VueRouter({ mode: 'history', //指定模式为 history 模式 base: process.env.BASE_URL, routes })
在本地测试时一切正常，但是build 后发布到服务器，需要为 nginx 添加一条 localtion 记录。
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，那么就可能会产生冲突，导致服务不稳定。
.Net Core 开启 Cors 跨域
直接在
startup.cs中配置,注意在 MVC之前
在ConfigureServices 中注册 Cors
services.AddCors(options => options.AddPolicy("AllowRequest", p => p.AllowAnyOrigin()) //允许所有跨域请求 );
在Configure 中使用 Cors
app.UseCors("AllowRequest");
Axios 与 Web API 通讯
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))
