通過Vue自帶服務(wù)器實(shí)現(xiàn)Ajax請(qǐng)求跨域（vue-cli）

跨域

• 原理：從A頁面訪問到B頁面，并且要獲取到B頁面上的數(shù)據(jù)，而兩個(gè)頁面所在的端口、協(xié)議和域名中哪怕有一個(gè)不對(duì)等，那么這種行為就叫跨域。
• 注意：類似通過請(qǐng)求進(jìn)行跨域的，大部分情況下并不是發(fā)不出去，也有可能是被瀏覽器攔截了。

為什么端口、協(xié)議和域名有一個(gè)不同就不能跨域？

• 同源策略：同源策略是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受 到 XSS、CSRF 等攻擊。同源是指"協(xié)議+域名+端口"三者相同，即便兩個(gè)不同的域名指向同一個(gè) ip 地址， 也是非同源的。

實(shí)現(xiàn)方案（需要安裝axios）

• 原理：瀏覽器和瀏覽器之間避免不了同源策略，但是通過服務(wù)器和服務(wù)器之間的傳遞是不需要同源策略的。
  • 當(dāng)在【頁面】中點(diǎn)擊【發(fā)送請(qǐng)求】，則請(qǐng)求會(huì)去連接同在【8080服務(wù)器】
  • 再通過【8080服務(wù)器】的請(qǐng)求，連接到【8081服務(wù)器】的程序
  • 【8081服務(wù)器】響應(yīng)，將數(shù)據(jù)傳回【8080服務(wù)器】
  • 【8080服務(wù)器】響應(yīng)，將數(shù)據(jù)傳到【頁面】上

安裝axios

• 原理：是一種基于promise實(shí)現(xiàn)對(duì)ajax技術(shù)的一種封裝，可以滿足于各種前端框架，用于負(fù)責(zé)與后端交互，get、post后端接口信息，相當(dāng)前后端的窗口。
• 安裝方法：
  • 打開CMD窗口，通過命令跳轉(zhuǎn)到當(dāng)時(shí)安裝Vue的文件路徑中
  • 在窗口中輸入npm i axios，當(dāng)出現(xiàn)added 6 packages in 2m，就安裝成功了
• 使用方法：XXX.vue文件中，在<script></script>的第一行輸入import axios from 'axios'即可（如果你的axios安裝時(shí)弄了一個(gè)文件夾存放的話，那么將'axios'=>'./文件名/axios')

啟動(dòng)Vue內(nèi)置服務(wù)器8080的代理功能，在vue.config.js中進(jìn)行配置

第一種：簡(jiǎn)單開啟

• 原理：優(yōu)先從proxy的路徑上去訪問get('請(qǐng)求路徑')的資源，也就是（拼接）http://localhost:8000/請(qǐng)求路徑，如果沒有找到資源，則再?gòu)拇矸?wù)器上訪問資源。
• 缺點(diǎn)：這種配置方法不適合支持配置多個(gè)代理。
  • 這種單一的從8080端口=>8081端口當(dāng)然可行，但是還有8082、8083、8084…（這么多端口每個(gè)配一遍就完了?。。。?/li>

// vue.config.js文件
devServer : {
    // Vue內(nèi)置服務(wù)器8080端口
    proxy : 'http://localhost:8000'
}
// XXX.vue文件
axios.get('/請(qǐng)求路徑').then(
    response => {
        // response.data:響應(yīng)數(shù)據(jù)信息
        console.log('響應(yīng)數(shù)據(jù)', response.data);
    },
    error => {
        // error.message：出現(xiàn)錯(cuò)誤時(shí)，顯示錯(cuò)誤信息
        console.log('錯(cuò)誤信息', error.message);
    }
)

第二種：高級(jí)開啟（常用）

devServer : {
    proxy : {
      // 凡事請(qǐng)求路徑以/api開始的，都走這個(gè)代理
      '/api' : {
        // 端口路徑
        target : 'http://localhost:8000',
        // 重寫'/api'路徑
        pathRewrite : {'^/api':''},
        // 默認(rèn)值true：表示支持 websocket
        ws : true,
        // 默認(rèn)值true：表示改變起源（讓目標(biāo)服務(wù)器不知道真正的起源）
        changeOrigin : true
      },
      '/foo' : {
        target : '<other_url>'
      }
    }
  }

• 注意：pathRewrite : {'^/api':''}原本是沒有的，可以自己添加，用來重寫’/api’路徑，
  • 以上的意思是將’/api’路徑改為空，也就是請(qǐng)求路徑前不用寫’/api’

// XXX.vue文件
axios.get('(如果沒設(shè)置pathRewrite的話，這里是要加上/api的)/請(qǐng)求路徑').then(
    response => {
        // response.data:響應(yīng)數(shù)據(jù)信息
        console.log('響應(yīng)數(shù)據(jù)', response.data);
    },
    error => {
        // error.message：出現(xiàn)錯(cuò)誤時(shí)，顯示錯(cuò)誤信息
        console.log('錯(cuò)誤信息', error.message);
    }
)

到此這篇關(guān)于通過Vue自帶服務(wù)器實(shí)現(xiàn)Ajax請(qǐng)求跨域（vue-cli）的文章就介紹到這了,更多相關(guān)vue ajax請(qǐng)求跨域內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論