從壹開始前後端分離 [.netCore 填坑 ] 三十三║ ⅖ 種方法實現完美跨域
緣起
哈嘍大家週四好，趁著大家在團建的時候花一個下午學點兒東西，也是督促大家學習喲，希望大家看到老張的文章，可以有一丟丟的學習動力。不過話說過來，該吃的團建還是要去的，不能學我呀 [ /(ㄒoㄒ)/~~ ]，昨天開始搭建公司的前後端分離專案，糾結是 Iview 還是 ElementUI ，百思不得其解，都說處女座糾結，我一個巨蟹為何如此，歡迎大佬們給出意見和建議~~~
開發 Vue 的時候，哪一種前端樣式框架更好？
鑑於群裡小夥伴問得最多的問題，這裡找到Top3的其中之一，就是跨域問題（下次說說EFCore），當然這個問題是老生常談的問題了，而且在之前的時候也已經說過了，不知道大家在使用的時候怎麼樣——坑來自於文章《
雖然介面資料很正常被獲取，但是介面地址還是不想暴露出去，欸？！那咋辦，這就是說到了今天說的內容了，大家看我寫的標題應該也能明白，⅖ 種方法—— 前邊的三種方法已經說了，這裡再重溫下：
0、不跨域 —— 前後端寫在一起，別笑，還真的有人已經把Vue 和 .net 整合到一起了，不說明
1、JsonP —— 在JQ中挺好，弊端也有，淺嘗輒止
2、新增請求頭 —— 需要後端來設計，不推薦
3、CORS —— 這個是我在跨域中遇到的神器，優缺點上邊也說了，還是很不錯的，推薦使用
4、webpack 本地代理 —— dev 環境的一大神器，只需在 webpack 中三行配置，即可代理到本地，只能在本地，大弊端，不過仍推薦使用
5、Nginx 反向代理 —— 完美解決 Build 後生產環境中的跨域問題，配合以後的負載均衡，強烈推薦
因為前三種跨域方法，已經在之前的文章中提到了《
最終我們的 部落格專案一 的呈現的效果 http://123.206.33.109:8077/：發現以及成功代理到本地了，並且是釋出到伺服器版本
一、基於webpack 的 proxy 代理——開發環境很方便
1、Vue-Cli 3.0 新增全域性配置檔案 vue.config.js
vue專案搭建的時候，會有一個全域性config配置檔案，在 vue-cli 2.0 腳手架中，很明顯的把它放到了 config 的一個資料夾中，是這樣的，我們在 index.js 中可以埠號的配置，打包之後路徑的配置，圖片的配置 等等
但是 vue-cli 3.0 腳手架中，去掉了 config 這個資料夾，那我們如何配置呢，我們可以在專案根目錄新建一個 vue.config.js 檔案，像之前的很多繁瑣配置，都可以在這個檔案裡配置啦。官方說明，vue.config.js 是一個可選的配置檔案，如果專案的 (和 package.json 同級的) 根目錄中存在這個檔案，那麼它會被 @vue/cli-service 自動載入。你也可以使用 package.json 中的 vue 欄位，但是注意這種寫法需要你嚴格遵照 JSON 的格式來寫。
我們就在根目錄下新建該檔案，然後新增內容：
module.exports = { // 基本路徑 baseUrl: "/", // 輸出檔案目錄 outputDir: "dist", // eslint-loader 是否在儲存的時候檢查 lintOnSave: true, // webpack配置 // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md chainWebpack: () => {}, configureWebpack: () => {}, // 生產環境是否生成 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安全協議 hotOnly: false, // https:{type:Boolean} proxy: null, // 設定代理 before: app => {} }, // 第三方外掛配置 pluginOptions: { // ... } };
相應的註釋都有，主要是配置 devServer ，從名字上也能看出來，這個是 dev 開發環境的服務配置，常用來配置我們的埠號 port ，還有一個就是 proxy 的設定代理。
2、配置 proxy 本地代理
將上邊的 proxy: null 註釋掉，然後修改代理設定：
proxy: { // 配置多個代理 "/apb": {//定義代理名稱，為了和我們介面中的api搞混，我故意設定為apb target: "http://123.206.33.109:8081",//我們的介面域名地址 ws: true, changeOrigin: true,//允許跨域 pathRewrite: { // 路徑重寫， "^/apb": "" // 替換target中的請求地址 } } },
這樣，我們就把介面地址代理到了本地，那代理到本地，如何呼叫呢，請往下看。
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
其他任何都不需要變，介面的使用還是原來的使用方法，這樣，我們在本地開發的時候，就可以獲取到後端api資料了，不用再去 .net core 中設定跨域CORS了，是不是很方便。
4、本地瀏覽效果
記得我們修改 vue.config.js 後要重啟下服務，然後就可以看到專案成功獲取資料，並代理到本地：
可以看到，我們已經把遠端介面資料 123.206.33.109 成功的代理到了本地 localhost:6688 ，是不是很簡單！
5、build 打包釋出 IIS
那我們本地開發好了，是不是一切都穩妥了呢，我們可以試一試，通過 build 打包，生成 dist 資料夾，然後將資料夾拷貝到伺服器，並配置 IIS ，這個很簡單，就和配置普通靜態頁面是一樣的，
我們發現雖然頁面可以瀏覽（可以渲染，證明我們的 vue 已經生效），但是卻獲取不到資料，這證明我們上邊的 proxy 代理，只是適用本地dev開發環境中：
截圖
雖然這個本地代理的方法很簡單，特別適合我們獨立開發，在跨域這一塊，完全不用和後端做處理，但是如何解決釋出狀態的呢，請繼續往下看。
二、基於Nginx 的反向代理——打包釋出一鍵搞定
這篇文章僅僅是如何使用 Nginx 作為一個反向代理伺服器，具體的深入原理以及負載均衡器等等，我會在以後的微服務系列中說到（不知不覺又給自己玩了一個坑