1.服務器已經開啟了CORS跨域支持

瀏覽器有同源策略限制：協議、域名、端口號

其中無法向非同源地址發送ajax請求

跨域解決方法：JSONP（只支持get不支持post），不是ajax

凡是有src屬性的標簽都有跨域能力
前端定義一個處理返回data的方法
后端獲取前端的callback參數（函數名）
后端用callback函數包裝數據返回給前端
前端由于先前定義了callback，就能以自己想要的方式處理數據（調用）
JSONP學習筆記

2）vue的jsonp ： this.$http.JSONP('', {})3) CORS跨域資源共享普通的跨域請求，只需要后端設置；帶cookie的跨域請求，前后端都要設置

什么是跨域？跨域解決方法

2.axios

創建實例時，即使配置了baseURL，也不影響，因為他是給相對路徑使用的，而我的測試頁面用的是絕對路徑。

baseURL 將自動加在 url 前面，除非 url 是一個絕對 URL。
它可以通過設置一個 baseURL 便于為 axios 實例的方法傳遞相對 URL

創建實例時配置headers，其中有緩存頭Cache-Control，設置為no-store：本地和代理服務器都不可以存儲緩存，每次都要重新請求，拿到內容。

攔截器
請求攔截器：發送請求之前做什么；對請求錯誤做什么；
設置攔截器是為了配合服務器的要求：請求接口時要求帶token，那我就在請求攔截器的發送請求之前，給headers配上token
Object.assign方法用于對象的合并，將源對象（source）的所有可枚舉屬性，復制到目標對象（target）

3. 登錄時報錯

OPTIONS http://122.248.77.123:8090/login/login net::ERR_CONNECTION_TIMED_OUT

查了一圈問題，發現這個ip地址ping不通…
ping是tcp/ip工具
1.解析域名為ip地址
2.檢查網絡是否通暢
3.檢測計算機名
4.了解所使用的操作系統

Ping命令的七種用法

4. mock.js

由以上問題，正好學習了下mock.js
手摸手教你在vue項目中使用mockjs模擬數據入門

5. slot-scope

slot-scope是element-ui表格里的用法，實際在vue里是slot插槽的概念
elementUI：理解vue之element-ui中的

• 使用時是scope.row
• scope不能直接用

vue插槽：Vue的slot-scope的場景的個人理解

6. vue導出表格

選擇插件時應當搜索vue導出excel的，當時搜的是elementUI導出表格，推薦到這個文章：Element-ui組件庫Table表格導出Excel表格
雖然用這2個插件沒毛病，但是，操作時報錯：

cant read property 'getElementsByTagName' of null

我就一直糾結于是否在按鈕點擊時，注冊在methods里的事件不能獲得dom元素（table），嘗試了在mounted里能獲取，于是在mounted里將dom保存到data，再methods里調用，依然不行！
然后陷入循環找不到原因…
最終發現，在布局時，將el-table放在了el-row里，影響了插件方法獲取dom，這里應當看看源碼…

7. 監聽路由的改變

路由跳轉前后，this.$route值
在mounted里檢測（決定了dom掛載到頁面上時是否渲染下拉框），是直接訪問路徑時隱藏；
watch路由的from，to，是保證路由切換時也能隱藏；

8.apache和php的關系

Apache是Web服務器，負責回應所有收到的Web請求。比如你訪問http://zhihu.com/1.html，那么Apache就找到根目錄下的1.html文件，將其中的內容返回。 如果我需要這個地址能顯示動態的東西，比如當前日期時間，那么就寫一個PHP程序1.php，當Apache收到http://zhihu.com/1.php的請求時，通過CGI調用PHP解釋程序，執行1.php文件的內容，然后將返回的字符串返回給客戶端。

就把服務器看成一間餐館，apache是店面的傳菜員，php是廚房的廚師。有些飲料之類的（靜態資源，如：HTML、CSS、JS、Images等），不用經過廚師，直接由傳菜員傳遞給顧客（Client）。如果需要廚師烹飪的菜式（例如：*.PHP等），就需要先等廚師把原始食材（php）烹飪完變成可以吃用的飯菜（靜態資源），傳菜員才能上菜。

9. package-lock.json

鎖定安裝時的包的版本號，并且需要上傳到git，以保證其他人在npm install時大家的依賴能保證一致。

package-lock.json的作用

10.vue項目中devServe 設置open為true的時候瀏覽器啟動兩次的解決辦法

vue.config.js 里的devServer里的open選項改為false，

package.json中的scripts改為 {“dev”: “vue-cli-service serve --open”}

總結

以上是生活随笔為你收集整理的开发测试比的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。