Vue中咱們能夠作哪些事來解決跨域

[Talk is cheap. Show me the code]

前言

前端開發中不可避免的會遇到種種跨域問題，本文旨在簡單講述跨域問題的產生以及咱們常見的解決方法（不想看理論知識，請直接跳轉到最後Vue相關）。須要注意的是前端是沒有辦法從根本上解決跨域問題的，但願讀完本文能對你有所幫助。

跨域問題的產生

由於瀏覽器的安全機制（同源策略）會對不一樣域名下的文件讀取進行限制，若是兩個資源的協議、端口、主機是相同的即表明兩個資源同源。當先後端資源協議、端口、主機不一時就表明兩個資源非同源，前端訪問後端資源時就會出現跨域問題。

解決思路

01.禁用瀏覽器安全檢查

既然跨域問題是因爲瀏覽器的安全機制存在，那咱們禁用掉安全機制檢查不就行了嘛，固然這種操做只能是在開發環境中使用，畢竟不可能禁用全部用戶的安全檢查機制。生產環境將先後端項目打包在一個服務器上便可。 配置以下：
在Chrome瀏覽器屬性--目標中配置

--args --disable-web-security 
複製代碼

02.使用JSONP跨域

jsonp解決跨域的原理在於，ajax自己是不能夠跨域的，可是jsonp利用來script能夠訪問跨域資源的特色，好比咱們能夠經過CDN的方式引入外部的資源庫如ElementUI

<script src="https://unpkg.com/element-ui/lib/index.js"></script>
複製代碼

利用script來訪問跨域資源，並在script連接尾部包裝一個callback回調函數，當咱們訪問這個資源地址時會執行這個callback函數，後臺服務器在接收到這個回調函數時，將服務端數據包裹在callback的參數中返回給客戶端，因而跨域的問題就解決了，如jqery中$ajax的datatype：jsonp就是利用了jsonp的特性來解決跨域問題。可是這種方法已經不多在使用了（存疑，不過我的的開發經歷幾乎沒有遇到這種方法了），由於jsonp須要後臺改動代碼才能夠實現跨域。

03.其餘方式

iframe嵌套通信、window.name、window.postMessage、服務器上設置代理頁面，nginx 反向代理等（nginx 服務內部配置 Access-Control-Allow-Origin：*）實際開發中前端也不多遇到這些狀況，因此再也不展開講述。

Vue中咱們能夠作哪些處理

利用webpack配置解決跨域：

在config--index.js中將proxyTable對象新增到配置中，其實這一步就能夠解決跨域了 在target中配置你的開發環境IP，配置以後須要重啓你的項目

在config--dev.env.js中新增一個baseURL:"'apis'"

在axiso實例建立中添加一個baseURL參數 baseURL 將自動加在 url 前面，除非 url 是一個絕對 URL。 它能夠經過設置一個 baseURL 便於爲 axios 實例的方法傳遞相對 URL

因而這三種就產生了聯繫，這樣就解決了前端的跨域問題，並解決了options預請求，固然這種解決方法只適用於開發環境。

若是有任何關於本文的意見，歡迎在文章下方留言，我會在看到的第一時間回覆。