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))
