vue前端跨域解決方案

2021-10-11 21:44:47 字數 1723 閱讀 5634

為什麼會出現跨域:

瀏覽器訪問非同源的**時,會被限制訪問,出現跨域問題.

常見的跨域有三種:

cors跨域(後端開啟) :全稱 「跨域資源共享」,原理:它允許瀏覽器向跨源伺服器,發出xmlhttprequest請求,從而克服了ajax只能同源使用的限制

vue**伺服器proxy跨域:通過請求本地的伺服器,然後本地的伺服器再去請求遠端的伺服器(後端部署介面的伺服器),最後本地伺服器再將請求回來的資料返回給瀏覽器(本地伺服器和瀏覽器之前不存在跨域)

兩個關鍵點:

本地伺服器(利用node.js建立的本地伺服器進行**,也叫**伺服器)和瀏覽器之間不存在跨域

伺服器和伺服器之間不存在跨域

話不多說,直接上**:

首先建立乙個 vue.config.js檔案

// 假設要請求的介面是:

module.exports =},

// 假如又有乙個介面是:

// 那就再配置乙個 get的,如下:

'/get':}

// 呼叫的時候直接 /get/list/add 就可以了}}

}// 注意:修改了配置檔案後一定要重啟才會生效;

我們可以利用axios的baseurl直接預設值是 api,這樣我們每次訪問的時候,自動補上這個api字首,就不需要我們自己手工在每個介面上面寫這個字首了

在入口檔案裡面配置如下:

// 後面發現,其實不加這個感覺也好像可以

如果這配置 'api/' 會預設讀取本地的域如果只是開發環境測試,上面那種就足夠了,如果區分生產和開發環境

就需要如下配置

分環境配置跨域:

建立乙個 api.config.js 檔案(其實隨便命名都可以)

const ispro = object.

is(process.env.

node_env

,'production'

)// 如果是生產環境,就用線上的介面;

module.exports =

然後在main.js 裡面引入,這樣可以保證動態的匹配生產和開發的定義字首

axios.defaults.baseurl = apiconfig.baseurl經過上面配置後,在dom裡面可以這樣輕鬆的訪問,也不需要在任何元件裡面引入axios模組了

async

getdata()

,

小結:

**跨域的主要方式是利用伺服器請求伺服器的方式避過跨域問題來實現的.大概的流程: 瀏覽器===>**伺服器===>目標伺服器.

前端跨域解決方案

跨域是指乙個域下的文件或指令碼試圖去請求另乙個域下的資源,這裡跨域是廣義的。其實我們通常所說的跨域是狹義的,是由瀏覽器同源策略限制的一類請求場景。什麼是同源策略?同源策略 sop same origin policy 是一種約定,由netscape公司1995年引入瀏覽器,它是瀏覽器最核心也最基本的...

前端常見跨域解決方案

前端常見跨域解決方案 全 跨域問題 平時被問到最多的問題還是關於跨域的,其實跨域問題真的不是乙個很難解決的問題。這裡我來簡單總結一下我推薦的幾種跨域解決方案。我最推薦的也是我工作中在使用的方式就是 cors 全稱為 cross origin resource sharing 跨域資源共享 這種方案對...

前端跨域請求及解決方案

跨域請求是當前發起請求的域 協議 網域名稱 埠 與該請求指向的資源所在的域不一致,常見的解決方式有 jsonp 跨域資源共享cors 反向 等 1 jsonp 2 跨域資源共享cors cross origin resource sharing 3 反向 最常用 在前端開發編碼過程中,常見的html...