目錄

第一章、了解跨域

第二章、解決跨域問(wèn)題——代理服務(wù)器

2.1 了解原理

2.2 如何配置代理服務(wù)器

2.2.1 配置代理服務(wù)器（方法一）

2.2.2 配置代理服務(wù)器（方法二）

第一章、了解跨域

AJAX及其相關(guān)知識(shí)應(yīng)用（很詳細(xì)）_?VE?的博客-CSDN博客

第二章、解決跨域問(wèn)題——代理服務(wù)器

2.1 了解原理

• 前端的8080端口需要向后端服務(wù)器3000端口請(qǐng)求數(shù)據(jù)，此時(shí)前端8080端口號(hào)發(fā)送了請(qǐng)求，3000端口號(hào)響應(yīng)了請(qǐng)求，返回了數(shù)據(jù)，由于瀏覽器的同源策略，該兩端口號(hào)不同導(dǎo)致，8080端口接收不到數(shù)據(jù)。
• 下就是一個(gè)代理服務(wù)器的圖，在我們前端配置一個(gè)8080端口的代理服務(wù)器，當(dāng)前端8080發(fā)送請(qǐng)求時(shí)，會(huì)向這個(gè)代理服務(wù)器發(fā)送，然代理服務(wù)器向后端3000端口的服務(wù)器發(fā)送請(qǐng)求，因?yàn)?span style="color:#fe2c24;">服務(wù)器與服務(wù)器之間沒(méi)有跨域問(wèn)題的，該3000端口服務(wù)器就會(huì)響應(yīng)數(shù)據(jù)，之后返回代理服務(wù)器，代理服務(wù)器接收到數(shù)據(jù)之后再返回前端8080端口（此時(shí)協(xié)議、域名、端口號(hào)都一致，就不存在跨域的問(wèn)題），從而跨域問(wèn)題得到解決
• 流程：8080端口下的網(wǎng)頁(yè)發(fā)請(qǐng)求 ? -> ? 8080端口代理服務(wù)器接收代理到（解決跨域） ? -> ? ?3000端口服務(wù)器響應(yīng)請(qǐng)求 ->8080端口代理服務(wù)器接收數(shù)據(jù) -> 8080端口下的網(wǎng)頁(yè)接收數(shù)據(jù)

2.2 如何配置代理服務(wù)器

利用vue-cil腳手架配置 ，有以下兩種方法：

2.2.1 配置代理服務(wù)器（方法一）

• 在vue的vue.config.js 中添加devServer配置項(xiàng)，如下：

module.exports = {
   devServer: {
        // 開(kāi)啟代理服務(wù)器,端口號(hào)寫(xiě)的是 需要發(fā)送給的 響應(yīng)服務(wù)器
        proxy: 'http://localhost:3000'
    },
}

?-- 注意點(diǎn)：當(dāng)我們添加devServer配置項(xiàng)時(shí)，服務(wù)器就會(huì)自動(dòng)開(kāi)啟了對(duì)應(yīng)8080端口號(hào)的代理服務(wù)器，此時(shí)我們配置的服務(wù)器是需要請(qǐng)求數(shù)據(jù)的服務(wù)器（地址）

-- 缺點(diǎn)：

? ? ? ? ·?只能代理一個(gè)服務(wù)器

? ? ? ? ·?如果 public 文件下有請(qǐng)求的數(shù)據(jù)的文件，那么代理就出問(wèn)題了，會(huì)直接請(qǐng)求該文件，不會(huì)去代理3000端口下的服務(wù)器數(shù)據(jù)

• 前端請(qǐng)求數(shù)據(jù)的方式：

?這里需要引入axios：

? ? ? ? · 我們使用axios庫(kù)，下載該庫(kù)打開(kāi)vscode終端? ：??npm i axios?

? ? ? ? · 然后把引入這個(gè)axios到我們的vue文件里面使用? ：?import axios from "axios";

注意：axios.get('請(qǐng)求路徑')，做的代理服務(wù)器會(huì)去找3000端口（該端口下有students地址/數(shù)據(jù)）下students的數(shù)據(jù)，但是當(dāng)請(qǐng)求的網(wǎng)頁(yè)本身有students地址時(shí)（也就是public 文件下有students文件），會(huì)優(yōu)先請(qǐng)求該文件夾里的數(shù)據(jù)，從而請(qǐng)求數(shù)據(jù)出現(xiàn)問(wèn)題

2.2.2 配置代理服務(wù)器（方法二）

• 在vue的vue.config.js 中添加devServer配置項(xiàng)，如下：

devServer: {
        proxy: {
            '/api': {//'/api'請(qǐng)求前綴
                target: 'http://localhost:3000',
                pathRewrite: { '^/api': '' }, // *匹配 /api 改為空，然后代理服務(wù)器會(huì)直接去 3000/students 請(qǐng)求
                // *下面不寫(xiě)，都是默認(rèn)為true
                // ws: true, // 用于支持websocket
                // changeOrigin: true // 用于控制請(qǐng)求頭中的host值
            },
            '/demo': {
                target: 'http://localhost:3001',
                pathRewrite: { '^/demo': '' },
                // ws: true, //用于支持websocket
                // changeOrigin: true //用于控制請(qǐng)求頭中的host值
            }
        }
    }
}

?-- 參數(shù)：

? ? ? ? ·?target：配置響應(yīng)的路徑地址

? ? ? ? ·?pathRewrite：重寫(xiě)路徑，匹配 /api 改為空，

? ? ? ? ·?ws：是否支持websocket

? ? ? ? ·?changeOrigin：控制請(qǐng)求頭中的host值，是否欺騙配置的響應(yīng)數(shù)據(jù)路徑端口，true可理解為欺騙，說(shuō)服服務(wù)器來(lái)源的端口也時(shí)3000端口，false就實(shí)話實(shí)說(shuō)，是8080端口

?-- 優(yōu)點(diǎn)：

? ? ? ? ·可以代理多個(gè)服務(wù)

? ? ? ? · 可以控制是否走代理 （如果走代理需要加 '/api'）

????????不加下面 pathRewrite ，代理服務(wù)器會(huì)直接去 3000/api/students 請(qǐng)求，而不是3000/students

• 前端請(qǐng)求數(shù)據(jù)的方式：

?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-768768.html

到了這里，關(guān)于Vue中利用代理服務(wù)器解決跨域問(wèn)題的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！