前言
在Web端Vue項(xiàng)目開發(fā)過程中，跨域問題是不可避免的；在我參與的Vue項(xiàng)目中愧杯，使用服務(wù)器代理的解決方案椎组；針對(duì)不同的環(huán)境（開發(fā)環(huán)境/生產(chǎn)環(huán)境），采用了不同的服務(wù)器代理方案凉倚；
服務(wù)器代理的原理大概是這樣：
代理服務(wù)器和訪問源（請(qǐng)求端）是同源的坊饶，但和被訪問服務(wù)器（資源端）是不同源的赢底，但服務(wù)器之間的訪問不受瀏覽器同源策略的影響(即不必?fù)?dān)心是否有跨域問題)碱呼，那么我們即可請(qǐng)求到同源服務(wù)器上的從被訪問服務(wù)器上的獲取到的請(qǐng)求資源了蒙挑；
Webpack配置proxy實(shí)現(xiàn)代理——開發(fā)環(huán)境
參與的項(xiàng)目工程通過
Vue-cli3來搭建的，因此沒有了Webpack的顯式配置文件愚臀；需要我們?cè)诠こ谈夸浵率謩?dòng)創(chuàng)建vue.config.js去實(shí)現(xiàn) Webpack的配置
新增Vue.config.js
module.exports = {
devServer: {
host: '127.0.0.1',
port: 8084,
open: true,// vue項(xiàng)目啟動(dòng)時(shí)自動(dòng)打開瀏覽器
proxy: {
'/api': { // '/api'是代理標(biāo)識(shí)忆蚀，用于告訴node，url前面是/api的就是使用代理的
target: "http://219.216.5.26:8080", //目標(biāo)地址姑裂，一般是指后臺(tái)服務(wù)器地址
changeOrigin: true, //是否跨域
pathRewrite: { // pathRewrite 的作用是把實(shí)際Request Url中的'/api'用""代替
'^/api': ""
}
}
}
}
}
這樣配置完成后馋袜，我們發(fā)起的每次http請(qǐng)求的Request Url的前面一部分都會(huì)和我們本地的源一樣；
舉例：
Axios.get("/api/bookCate")
我們項(xiàng)目跑在開發(fā)環(huán)境下的http://localhost:8080上舶斧，那么上述請(qǐng)求的Request Url的就是 http://localhost:8080/api/bookCate;這應(yīng)該就是我們的代理服務(wù)器中該資源的地址欣鳖，與客戶端同源；而數(shù)據(jù)的實(shí)際來源則是http://219.216.5.26:8080/api/bookCate茴厉，這樣即實(shí)現(xiàn)代理跨域泽台；
該方法的原理
目前猜測(cè)這個(gè)代理服務(wù)器可能是Node；
Nginx代理——生產(chǎn)環(huán)境
nginx版本：1.16.1
修改nginx.conf文件下的serve下配置：
listen 8088; //端口號(hào)
server_name localhost;
// 打包之后項(xiàng)目放到的路徑矾缓；
location / {
root dist; // dist是指和nginx.exe同級(jí)的dist目錄 怀酷，一般默認(rèn)是html文件夾
index index.html index.htm; // dist文件夾下的html文件
}
// 此處是服務(wù)器代理部分，為解決http請(qǐng)求跨域問題
// 若服務(wù)器已設(shè)置允許跨域嗜闻，則這塊就不需要了
location /api{
proxy_pass http://219.216.5.26:8080/api蜕依；
// 被代理服務(wù)器地址
}
舉例：
Axios.get("/api/bookCate")
//其實(shí)想要訪問的是 "http://219.216.5.26:8080/api/bookCate" 下的資源
生產(chǎn)環(huán)境下的,我們項(xiàng)目跑Nginx服務(wù)器監(jiān)聽的http://localhost:8088上，那么上述請(qǐng)求的Request Url的就是 http://localhost:8088/api/bookCate;
這應(yīng)該就是我們的代理服務(wù)器中該資源的地址琉雳，與客戶端同源样眠；
而數(shù)據(jù)的實(shí)際來源則是http://219.21.5.5:9903/api/bookCate，這樣即實(shí)現(xiàn)代理跨域翠肘；
