快捷導(dǎo)航

vue如何解決axios請(qǐng)求前端跨域問(wèn)題

更新時(shí)間：2021年10月24日 10:58:09 作者：浪漫主義碼農(nóng)

vue項(xiàng)目中,前端使用axios與后臺(tái)進(jìn)行數(shù)據(jù)請(qǐng)求或者提交的時(shí)候,如果后臺(tái)沒(méi)有設(shè)置跨域,瀏覽器做數(shù)據(jù)請(qǐng)求的時(shí)候就會(huì)報(bào)錯(cuò),這篇文章主要給大家介紹了關(guān)于vue如何解決axios請(qǐng)求前端跨域問(wèn)題的相關(guān)資料,需要的朋友可以參考下

前言

最近在寫(xiě)純前端的vue項(xiàng)目的時(shí)候，碰到了axios請(qǐng)求本機(jī)的資源的時(shí)候，出現(xiàn)了訪問(wèn)報(bào)404的問(wèn)題。這就讓我很難受。查詢了資料原來(lái)是跨域的問(wèn)題。

在正常開(kāi)發(fā)中跨域問(wèn)題有很多的解決方案。最常見(jiàn)的就是后端修改響應(yīng)頭。但是前端也可以解決，通過(guò)反向代理。為了防止下一次這樣的錯(cuò)誤出現(xiàn)，記錄一下，總結(jié)一下。

所以現(xiàn)在我們來(lái)復(fù)盤(pán)一下，然后解決掉。

一、為什么會(huì)出現(xiàn)跨域的問(wèn)題？

跨域：瀏覽器從一個(gè)域名的網(wǎng)頁(yè)去請(qǐng)求另一個(gè)域名的資源時(shí)，域名、端口、協(xié)議任一不同，都是跨域。

在前后端分離的模式下，前后端的域名是不一致的，此時(shí)就會(huì)發(fā)生跨域訪問(wèn)問(wèn)題?？缬騿?wèn)題來(lái)源于JavaScript的同源策略，即只有協(xié)議+主機(jī)名+端口號(hào)(如存在)相同，則允許相互訪問(wèn)。也就是說(shuō)JavaScript只能訪問(wèn)和操作自己域下的資源，不能訪問(wèn)和操作其他域下的資源。跨域問(wèn)題是針對(duì)JS和ajax的。而axios是通過(guò)Promise實(shí)現(xiàn)對(duì)ajax技術(shù)的一種封裝，也同樣存在跨域問(wèn)題。

二、解決方案

這里我就使用本機(jī)的開(kāi)啟兩個(gè)不同的端口來(lái)測(cè)試。

未處理跨域前的報(bào)錯(cuò)

沒(méi)有做跨域處理請(qǐng)求是這樣的

 axios.get('http://localhost:8080/getData')
 .then(res => {
   console.log(res)
 })
 .catch(err => {
   console.error(err); 
 })

跨域資源共享（CORS）

前端進(jìn)行反向代理來(lái)解決跨域問(wèn)題。原理圖如下：

1、vue項(xiàng)目的端口是8081

2、自己電腦開(kāi)啟了一個(gè)8080的端口，請(qǐng)求/getData就會(huì)放回json數(shù)據(jù)。

3、配置代理

1.在vue2.0中

修改config文件夾下的index.js文件，在proxyTable中加上如下代碼：

   proxyTable: {
      '/apis': {
        target: 'http://localhost:8080/',  //要解決跨域的接口的域名
        secure:false,           //如果是https接口，需要配置這個(gè)參數(shù)
        changeOrigin: true,  // 如果接口跨域，需要進(jìn)行這個(gè)參數(shù)配置
        pathRewrite: {
          '^/apis': ''  // 路徑重寫(xiě)
        }
      },
    },

然后在請(qǐng)求中axios中這樣寫(xiě)

 axios.get('apis/getData')
 .then(res => {
   console.log(res)
 })
 .catch(err => {
   console.error(err); 
 })

分析：

target后面的就是需要請(qǐng)求的網(wǎng)址的公共部分，然后用/apis來(lái)代理這個(gè)，最后重寫(xiě)一些路徑，請(qǐng)求的時(shí)候使用的我們的代理的apis來(lái)作為前綴。

這個(gè)前綴我們可以自定義，proxyTable是對(duì)象，所以我們可以配多個(gè)代理。

跨域解決

2.在vue3.0中

vue-cli3 腳手架搭建完成后，項(xiàng)目目錄中沒(méi)有 vue.config.js 文件，需要手動(dòng)創(chuàng)建

新建一個(gè)vue.config.js，配置以下信息，同樣可以解決。

module.exports = {   
    devServer: {
        proxy: {
            '^/api': {
                target: 'http://localhost:8080/',//接口的前綴
                ws:true,//代理websocked
                changeOrigin:true,//虛擬的站點(diǎn)需要更管origin
                pathRewrite:{
                    '^/api':''//重寫(xiě)路徑
                }
            }
        }
    }
}

小結(jié)：

changeOrigin: true ：開(kāi)啟代理：在本地會(huì)創(chuàng)建一個(gè)虛假服務(wù)器，然后發(fā)送請(qǐng)求的數(shù)據(jù)，并同時(shí)接收請(qǐng)求的數(shù)據(jù)，這樣服務(wù)端和服務(wù)端就可以進(jìn)行數(shù)據(jù)的交互。

apis就是接口實(shí)際請(qǐng)求的前綴，去代理了我們的實(shí)際的接口前綴的公共部分，也就是協(xié)議+主機(jī)名+端口號(hào)

比如請(qǐng)求接口為localhost:8080/getData 我們只需要傳入：getData
那么公共的域名就是 localhost:8080/,我們就是在請(qǐng)求接口的公共域名localhost:8080/改為api/即可!

把項(xiàng)目運(yùn)行起來(lái)可以看到接口請(qǐng)求的路徑為 :localhost:8081/apis/getData

而進(jìn)過(guò)代理后，實(shí)際的請(qǐng)求路徑是： localhost:8080/getData