緣起
哈嘍大家周四好，趁著大家在團建的時候花一個下午學點兒東西沽损，也是督促大家學習喲灯节，希望大家看到老張的文章，可以有一丟丟的學習動力。不過話說過來炎疆，該吃的團建還是要去的卡骂，不能學我呀 [ /(ㄒoㄒ)/~~ ]，昨天開始搭建公司的前后端分離項目磷雇，糾結是 Iview 還是 ElementUI 偿警，百思不得其解，都說處女座糾結唯笙，我一個巨蟹為何如此螟蒸，歡迎大佬們給出意見和建議~~~
開發(fā) Vue 的時候，哪一種前端樣式框架更好崩掘？
鑒于群里小伙伴問得最多的問題七嫌，這里找到Top3的其中之一，就是跨域問題（下次說說EFCore）苞慢，當然這個問題是老生常談的問題了诵原，而且在之前的時候也已經(jīng)說過了，不知道大家在使用的時候怎么樣——坑來自于文章《框架之十二 || 三種跨域方式比較》挽放。當然绍赛，大家會問了，既然都說過了辑畦，為何還要說呢吗蚌，特別是使用 CORS 來實現(xiàn)跨域，很輕松纯出，短短的幾行代碼就搞定了蚯妇，但是或多或少會遇到這樣的問題，1暂筝、把Http和 Https 搞混了箩言，失敗焕襟；2陨收、如果是前端端口號不固定，會經(jīng)常要后端配置端口號鸵赖，麻煩务漩；3、最重要的一點就是把我們的接口地址暴漏出去了卫漫，不爽；如果你不信肾砂，可以看看我之前自己的一個線上版本 http://vue.blog.azlinli.com/#/列赎，
雖然接口數(shù)據(jù)很正常被獲取，但是接口地址還是不想暴露出去，欸包吝？饼煞！那咋辦，這就是說到了今天說的內(nèi)容了诗越，大家看我寫的標題應該也能明白砖瞧，? 種方法—— 前邊的三種方法已經(jīng)說了，這里再重溫下：
0嚷狞、不跨域 —— 前后端寫在一起块促，別笑，還真的有人已經(jīng)把Vue 和 .net 整合到一起了床未，不說明
1竭翠、JsonP —— 在JQ中挺好，弊端也有薇搁，淺嘗輒止
2斋扰、添加請求頭 —— 需要后端來設計，不推薦
3啃洋、CORS —— 這個是我在跨域中遇到的神器传货，優(yōu)缺點上邊也說了，還是很不錯的宏娄，推薦使用
4问裕、webpack 本地代理 —— dev 環(huán)境的一大神器，只需在 webpack 中三行配置绝编，即可代理到本地僻澎，只能在本地，大弊端十饥，不過仍推薦使用
5窟勃、Nginx 反向代理 —— 完美解決 Build 后生產(chǎn)環(huán)境中的跨域問題，配合以后的負載均衡逗堵，強烈推薦
因為前三種跨域方法秉氧，已經(jīng)在之前的文章中提到了《框架之十二 || 三種跨域方式比較》 ，這里就不多說了蜒秤，今天主要說說 Webpack 的本地代理汁咏，和Nginx反向代理實現(xiàn)跨域，完全不用對后端進行操作作媚；
最終我們的 博客項目一 的呈現(xiàn)的效果 http://123.206.33.109:8077/：發(fā)現(xiàn)以及成功代理到本地了攘滩，并且是發(fā)布到服務器版本
一、基于webpack 的 proxy 代理——開發(fā)環(huán)境很方便
1纸泡、Vue-Cli 3.0 新增全局配置文件 vue.config.js
vue項目搭建的時候漂问，會有一個全局config配置文件，在 vue-cli 2.0 腳手架中，很明顯的把它放到了 config 的一個文件夾中蚤假，是這樣的栏饮，我們在 index.js 中可以端口號的配置，打包之后路徑的配置磷仰，圖片的配置 等等
但是 vue-cli 3.0 腳手架中袍嬉，去掉了 config 這個文件夾，那我們?nèi)绾闻渲媚卦钇剑覀兛梢栽陧椖扛夸浶陆ㄒ粋€ vue.config.js 文件伺通，像之前的很多繁瑣配置，都可以在這個文件里配置啦民逼。官方說明泵殴，vue.config.js 是一個可選的配置文件，如果項目的 (和 package.json 同級的) 根目錄中存在這個文件拼苍，那么它會被 @vue/cli-service 自動加載笑诅。你也可以使用 package.json 中的 vue 字段，但是注意這種寫法需要你嚴格遵照 JSON 的格式來寫疮鲫。
我們就在根目錄下新建該文件吆你，然后添加內(nèi)容：
module.exports = { // 基本路徑
baseUrl: "/", // 輸出文件目錄
outputDir: "dist", // eslint-loader 是否在保存的時候檢查
lintOnSave: true, // webpack配置 // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
chainWebpack: () => {},
configureWebpack: () => {}, // 生產(chǎn)環(huán)境是否生成 sourceMap 文件
productionSourceMap: true, // css相關配置
css: { // 是否使用css分離插件 ExtractTextPlugin
extract: true, // 開啟 CSS source maps?
sourceMap: false, // css預設器配置項
loaderOptions: {}, // 啟用 CSS modules for all css / pre-processor files.
modules: false }, // use thread-loader for babel & TS in production build // enabled by default if the machine has more than 1 cores
parallel: require("os").cpus().length > 1, // PWA 插件相關配置 // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {}, // webpack-dev-server 相關配置
devServer: {
open: true, //配置自動啟動瀏覽器
host: "127.0.0.1",//主機
port: 6688, // 端口號自定義
https: false,//是否開啟https安全協(xié)議
hotOnly: false, // https:{type:Boolean}
proxy: null, // 設置代理
before: app => {}
}, // 第三方插件配置
pluginOptions: { // ...
}
};
相應的注釋都有，主要是配置 devServer 俊犯，從名字上也能看出來妇多，這個是 dev 開發(fā)環(huán)境的服務配置，常用來配置我們的端口號 port 燕侠，還有一個就是 proxy 的設置代理者祖。
2、配置 proxy 本地代理
將上邊的 proxy: null 注釋掉绢彤，然后修改代理設置：
proxy: { // 配置多個代理
"/apb": {//定義代理名稱七问，為了和我們接口中的api搞混，我故意設置為apb
target: "http://123.206.33.109:8081",//我們的接口域名地址
ws: true,
changeOrigin: true,//允許跨域
pathRewrite: { // 路徑重寫茫舶，
"^/apb": "" // 替換target中的請求地址
}
}
},
這樣械巡，我們就把接口地址代理到了本地，那代理到本地饶氏，如何調(diào)用呢讥耗，請往下看。
3疹启、修改接口api地址古程，http.js文件
還記得我們在 src 文件夾下有一個 api/http.js 文件么，這個就是配置我們的 http 請求相關的喊崖，其他的都不變挣磨，我們只需要把域名去掉即可菲宴，或者寫上本項目的域名：
// 配置API接口地址
var root1 = "http://localhost:58427/api";//沒有代理的本地api地址
var root2 = "http://123.206.33.109:8081/api/";//沒有代理的服務器api地址
var root = "/apb/api/";//配置 proxy 代理的api地址，也可以寫成http://localhost:6688/apb/api
其實說白了趋急，就是在項目啟動的時候，在node服務器中势誊，把 http://123.206.33.109:8081 == /abp == http://localhost:6688/apb
其他任何都不需要變呜达，接口的使用還是原來的使用方法，這樣粟耻，我們在本地開發(fā)的時候查近，就可以獲取到后端api數(shù)據(jù)了，不用再去 .net core 中設置跨域CORS了挤忙，是不是很方便霜威。
4、本地瀏覽效果
記得我們修改 vue.config.js 后要重啟下服務册烈，然后就可以看到項目成功獲取數(shù)據(jù)戈泼，并代理到本地：
可以看到，我們已經(jīng)把遠程接口數(shù)據(jù) 123.206.33.109 成功的代理到了本地 localhost:6688 赏僧，是不是很簡單大猛！
5、build 打包發(fā)布 IIS
那我們本地開發(fā)好了淀零，是不是一切都穩(wěn)妥了呢挽绩，我們可以試一試，通過 build 打包驾中，生成 dist 文件夾唉堪，然后將文件夾拷貝到服務器，并配置 IIS 肩民，這個很簡單唠亚，就和配置普通靜態(tài)頁面是一樣的，
我們發(fā)現(xiàn)雖然頁面可以瀏覽（可以渲染此改，證明我們的 vue 已經(jīng)生效）趾撵，但是卻獲取不到數(shù)據(jù)，這證明我們上邊的 proxy 代理共啃，只是適用本地dev開發(fā)環(huán)境中：
截圖
雖然這個本地代理的方法很簡單占调，特別適合我們獨立開發(fā)，在跨域這一塊移剪，完全不用和后端做處理诺核，但是如何解決發(fā)布狀態(tài)的呢，請繼續(xù)往下看许帐。
二照弥、基于Nginx 的反向代理——打包發(fā)布一鍵搞定
這篇文章僅僅是如何使用 Nginx 作為一個反向代理服務器言津，具體的深入原理以及負載均衡器等等，我會在以后的微服務系列中說到（不知不覺又給自己玩了一個坑??）取试。
1悬槽、Nginx的代理工作原理
反向代理（Reverse Proxy）方式是指以代理服務器來接受 Internet上 的連接請求，然后將請求轉發(fā)給內(nèi)部網(wǎng)絡上的服務器瞬浓；并將從服務器上得到的結果返回給 Internet 上請求連接的客戶端初婆，此時代理服務器對外就表現(xiàn)為一個服務器。
通常的代理服務器猿棉，只用于代理內(nèi)部網(wǎng)絡對 Internet 外部網(wǎng)絡的連接請求磅叛，客戶機必須指定代理服務器，并將本來要直接發(fā)送到 Web 服務器上的 http 請求發(fā)送到代理服務器中萨赁。不支持外部網(wǎng)絡對內(nèi)部網(wǎng)絡的連接請求弊琴，因為內(nèi)部網(wǎng)絡對外部網(wǎng)絡是不可見的。當一個代理服務器能夠代理外部網(wǎng)絡上的主機杖爽， 訪問內(nèi)部網(wǎng)絡時敲董，這種代理服務的方式稱為反向代理服務。此時代理服務器對外就表現(xiàn)為一個Web服務器慰安，外部網(wǎng)絡就可以簡單把它當作一個標準的 Web 服務器 而不需要特定的配置臣缀。不同之處在于，這個服務器沒有保存任何網(wǎng)頁的真實數(shù)據(jù)泻帮，所有的靜態(tài)網(wǎng)頁或者CGI程序精置，都保存在內(nèi)部的Web服務器上。因此對反向代 理服務器的攻擊并不會使得網(wǎng)頁信息遭到破壞锣杂，這樣就增強了Web服務器的安全性脂倦。
總結來說呢，就是我們通過 nginx 反向代理服務器處理我們的請求元莫，具體的數(shù)據(jù)處理還是較給 IIS赖阻，然后得到處理過的數(shù)據(jù)以后，我們再發(fā)送給 Internet 請求的客戶端踱蠢，這樣就不會存在跨域的問題了火欧。
2、Nginx 下載與使用
下載地址：http://nginx.org/en/download.html
我選擇下載穩(wěn)定版 1.14 茎截，下載好后解壓苇侵，然后就看到根目錄下的 Nginx.exe ，直接雙擊即可開啟服務企锌，然后就會在任務管理器查看到已經(jīng)啟動的 Nginx 代理服務榆浓。
因為默認的是80端口，大家的端口應該都已經(jīng)被占用撕攒，所以我們需要修改端口
打開 config 文件夾下的 nginx.conf 文件陡鹃，然后修改端口號
server {
listen 8077;
server_name localhost;
這個很簡單烘浦，這個時候記得要重啟 Nginx 服務，你可以采用命令的形式萍鲸，不過我有時候會發(fā)現(xiàn)無效闷叉，我一般使用的時候，在任務管理器中把所有的 nginx 進程全部結束脊阴，然后雙擊 nginx.exe 開啟片习。
這個時候我們直接訪問 localhost:8077 就發(fā)現(xiàn)已經(jīng)啟動成功了，只不過是 nginx 的歡迎頁蹬叭。
老張說：這個時候你一定好奇，為什么僅僅配置下状知，就能訪問該端口呢秽五，不信的話，你可以在 cmd 中 通過 netstat -an 命令來查看 8077 端口是否被使用
發(fā)現(xiàn)已經(jīng)被監(jiān)聽使用饥悴，如果還不相信坦喘，你可以創(chuàng)建一個 IIS 項目，然后配置 8077 端口西设，發(fā)現(xiàn)會報錯瓣铣，這也就是說明了，Nginx 是通過內(nèi)部 IIS 服務器來實現(xiàn)訪問的：
3贷揽、將上文打包后的 dist 文件棠笑，配置 Nginx 代理
1、將我們上邊 build 后的 dist 文件禽绪，放到咱們下載的 nginx 下的 html文件夾
2蓖救、配置代理
還是我們的 config/nginx.conf 文件，打開并配置 本地代理 印屁，注意注釋是用 # 號循捺，不是 //
server {
listen 8077;#監(jiān)聽端口，也就是我們的項目端口
server_name localhost;#服務器主機
location / {
root html;#監(jiān)聽文件夾雄人，默認是nginx下的html文件夾从橘，也可以自定義物理路徑 E:\\Nginx\\test
index index.html index.htm;#默認首次啟動的文件
}
#配置本地代理規(guī)則
location /apb {#名字取一個 apb ，為了和 api 做區(qū)分
rewrite ^.+apb/?(.*)$ /$1 break; #路徑重寫機制
include uwsgi_params;
proxy_pass http://123.206.33.109:8081; #api接口的域名地址
}
4础钠、本地以及服務器發(fā)布預覽
這個時候恰力，你再訪問 localhost:8077 就能看到我們的項目內(nèi)容了，訪問頁面也能看到我們的數(shù)據(jù)了旗吁，代理成功牺勾！
這個時候僅僅是本地，那服務器行不行呢阵漏，我們只需要將我們的 nginx 文件夾拷貝到服務器驻民，并且雙擊 nginx.exe 啟動代理服務翻具，然后就可以啦！
是不是很簡單回还，只需要把http.js 的baseurl 修改一下裆泳，完全不用修改我們?nèi)魏蔚恼{(diào)用接口地址，也不用修改后端柠硕，就可以實現(xiàn)跨域工禾。
相關代理，包括 nginx 文件夾蝗柔，我已經(jīng)放到 git 上闻葵，大家可以自己看一看。
三癣丧、結語
本篇文章是接著上一篇跨域文章的下篇槽畔，通過這 5 種方法，很好的實現(xiàn)了跨域問題胁编，不僅僅是在 Vue 項目中厢钧，其他任何都可以這么使用，完美的解決了問題嬉橙，與 CORS 相比早直，Nginx 更有前端主動權，各有利弊市框，我更傾向于 Nginx 代理霞扬，因為以后會涉及到負載均衡的使用，好啦枫振，明天說說 EFCore 的使用吧祥得。
