ajax 跨域请求api_【.NET Core 3.0】框架之十二 || 跨域 与 Proxy
本文有配套視頻：
https://www.bilibili.com/video/av58096866/?p=8
?一、為什么會(huì)出現(xiàn)跨域的問(wèn)題
跨域問(wèn)題由來(lái)已久，主要是來(lái)源于瀏覽器的”同源策略”。
? 何為同源？只有當(dāng)協(xié)議、端口、和域名都相同的頁(yè)面，則兩個(gè)頁(yè)面具有相同的源。只要網(wǎng)站的 協(xié)議名protocol、 主機(jī)host、 端口號(hào)port 這三個(gè)中的任意一個(gè)不同，網(wǎng)站間的數(shù)據(jù)請(qǐng)求與傳輸便構(gòu)成了跨域調(diào)用，會(huì)受到同源策略的限制。?
同源策略限制從一個(gè)源加載的文檔或腳本如何與來(lái)自另一個(gè)源的資源進(jìn)行交互。這是一個(gè)用于隔離潛在惡意文件的關(guān)鍵的安全機(jī)制。瀏覽器的同源策略，出于防范跨站腳本的攻擊，禁止客戶端腳本(如JavaScript)對(duì)不同域的服務(wù)進(jìn)行跨站調(diào)用(通常指使用XMLHttpRequest請(qǐng)求)。
發(fā)生跨域的三個(gè)必要條件：
瀏覽器限制： 即瀏覽器對(duì)跨域行為進(jìn)行檢測(cè)和阻止；
觸發(fā)跨域的三要素之一： 即 協(xié)議，域名和端口三個(gè)條件滿足其一；
發(fā)起的是xhr請(qǐng)求： 即發(fā)起的是XMLHttpRequest類型的請(qǐng)求；
所以說(shuō)我們?cè)趙eb中，我們無(wú)法去獲取跨域的請(qǐng)求，常見(jiàn)的就是無(wú)法通過(guò)js獲取接口。
這里要說(shuō)下我的以前使用的經(jīng)驗(yàn)：在同源系統(tǒng)下，前端js去調(diào)用后端接口，然后后端C#去調(diào)取跨域接口，這是我以前采用的辦法，但是前后端分離，這個(gè)辦法肯定就是不行了，因?yàn)槟菚r(shí)候的MVC僅僅是頁(yè)面上的前和后，還是一個(gè)項(xiàng)目，現(xiàn)在卻是不同域名或端口的兩個(gè)項(xiàng)目。
但是只要我們合理使用同源策略，就可以達(dá)到跨域訪問(wèn)的目的。
?二、JsonP
首先需要建立了一個(gè)前端項(xiàng)目，用 IIS 代理一下，用來(lái)模擬前后端分離后的前端訪問(wèn)部分，具體如下步驟：
1、模擬前端訪問(wèn)頁(yè)面
在 wwwroot 文件夾下，新建一個(gè) CorsPost.html 靜態(tài)頁(yè)面，使用Jquery來(lái)發(fā)送請(qǐng)求。
設(shè)計(jì)了2種跨域方法，一個(gè)是 JSONP 的，一個(gè)是 CORS 的：
<html><head> <meta charset="utf-8"> <title>Blog.Coretitle> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">script> <style> div { margin: 10px; word-wrap: break-word; }style> <script> $(document).ready(function () { $("#jsonp").click(function () { $.getJSON("http://localhost:8081/api/Login/jsonp?callBack=?", function (data) { $("#data-jsonp").html("數(shù)據(jù): " + data.value); }); }); $("#cors").click(function () { $.get("http://localhost:8081/api/Login/Token", function (data, status) { console.log(data); $("#status-cors").html("狀態(tài): " + status); $("#data-cors").html("數(shù)據(jù): " + data? data.token:"失敗"); }); }); $("#cors-post").click(function () { let postdata = { "bID": 10, "bsubmitter": "222", "btitle": "33333", "bcategory": "4444", "bcontent": "5555", "btraffic": 0, "bcommentNum": 0, "bUpdateTime": "2018-11-08T02:36:26.557Z", "bCreateTime": "2018-11-08T02:36:26.557Z", "bRemark": "string" }; $.ajax({ type: 'post', url: 'http://localhost:8081/api/Values', contentType: 'application/json', data: JSON.stringify(postdata), success: function (data, status) { console.log(data); $("#status-cors-post").html("狀態(tài): " + status); $("#data-cors-post").html("數(shù)據(jù): " + JSON.stringify(data)); } }); }); });script>head><body> <h3>通過(guò)JsonP實(shí)現(xiàn)跨域請(qǐng)求h3> <button id="jsonp">發(fā)送一個(gè) GET button> <div id="status-jsonp">div> <div id="data-jsonp">div> <hr /> <h3>通過(guò)CORS實(shí)現(xiàn)跨域請(qǐng)求，另需要在服務(wù)器段配置COREh3> <button id="cors">發(fā)送一個(gè) GET button> <div id="status-cors">div> <div id="data-cors">div> <hr /> <button id="cors-post">發(fā)送一個(gè) POST button> <div id="status-cors-post">div> <div id="data-cors-post">div> <hr />body>html>注意：這里一定要注意jsonp的前端頁(yè)面請(qǐng)求寫法，要求很嚴(yán)謹(jǐn)
2、請(qǐng)求頁(yè)面部署
1、其實(shí)只需要當(dāng)前Blog.Core 項(xiàng)目配置了靜態(tài)文件中間件，直接訪問(wèn)就可以，
比如我的在線地址：http://xxxxx:8081/corspost.html，但是這樣起不到跨域的目的，因?yàn)檫@樣前臺(tái)和后臺(tái)，還是公用的一個(gè) 8081 端口，方法不推薦。
2、單獨(dú)部署：將這個(gè)頁(yè)面部署到自己的IIS中，拷貝到文件里，直接在iis添加該文件，訪問(wèn)剛剛的Html文件目錄就行，推薦。
3、設(shè)計(jì)后臺(tái)接口
在我們的項(xiàng)目 LoginController 中，設(shè)計(jì)Jsonp接口，Core調(diào)用的接口我們已經(jīng)有了，就是之前獲取Token的接口GetJWTStr
/// /// 獲取JWT的方法4：給 JSONP 測(cè)試 /// /// /// /// /// /// /// [HttpGet] [Route("jsonp")] public void Getjsonp(string callBack, long id = 1, string sub = "Admin", int expiresSliding = 30, int expiresAbsoulute = 30) { TokenModelJwt tokenModel = new TokenModelJwt { Uid = id, Role = sub }; string jwtStr = JwtHelper.IssueJwt(tokenModel); string response = string.Format("\"value\":\"{0}\"", jwtStr); string call = callBack + "({" + response + "})"; Response.WriteAsync(call); }注意：這里一定要注意jsonp的接口寫法，要求很嚴(yán)謹(jǐn)
?
4、測(cè)試
點(diǎn)擊 “通過(guò)JsonP實(shí)現(xiàn)跨域請(qǐng)求”按鈕，發(fā)現(xiàn)已經(jīng)有數(shù)據(jù)了，證明Jsonp跨域已經(jīng)成功，你可以換成自己的域名試一試，但是Cors的還不行
?
現(xiàn)在咱們就說(shuō)說(shuō)這種JSONP跨域的優(yōu)劣有哪些：
優(yōu)勢(shì)：
1、操作很簡(jiǎn)單；
2、支持老式瀏覽器；
劣勢(shì)：
1、這種方式只能發(fā)生get請(qǐng)求；
2、確定jsonp的請(qǐng)求是否失敗并不容易，大多數(shù)框架的實(shí)現(xiàn)都是結(jié)合超時(shí)時(shí)間來(lái)判定；
3、不太安全，可能也會(huì)受到攻擊
從上邊咱們可以看出來(lái)，雖然JSONP操作起來(lái)很簡(jiǎn)單，幾乎和我們的 Ajax 請(qǐng)求沒(méi)有什么區(qū)別，但是弊端也特別大，目前市場(chǎng)上并沒(méi)有很好的流通起來(lái)，那有沒(méi)有更通用的，更安全的跨域方案呢，沒(méi)錯(cuò)，就是今天的重頭戲 —— CORS。
?
?三、CORS
這個(gè)方法是目前我個(gè)人感覺(jué)，最簡(jiǎn)單，最安全的方法，詳細(xì)步驟如下：
1、前端ajax調(diào)用
前端的代碼在jsonp的時(shí)候已經(jīng)寫好，請(qǐng)往上看第二大節(jié)的第一步驟，
后端接口也是一個(gè)很簡(jiǎn)單的 /api/Login/Token 接口
剩下的就是配置跨域了，很簡(jiǎn)單！
2、配置 CORS 跨域
在 startup.cs 啟動(dòng)文件的 ConfigureServices 中添加
services.AddCors(c?=> { // 配置策略 c.AddPolicy("LimitRequests", policy => { // 支持多個(gè)域名端口，注意端口號(hào)后不要帶/斜桿：比如localhost:8000/，是錯(cuò)的 // http://127.0.0.1:1818 和 http://localhost:1818 是不一樣的，盡量寫兩個(gè) policy .WithOrigins("http://127.0.0.1:1818", "http://localhost:8080", "http://localhost:8021", "http://localhost:8081", "http://localhost:1818") .AllowAnyHeader()//允許任意頭 .AllowAnyMethod();//允許任意方法 }); });基本注釋都有，大家都能看的懂，這里說(shuō)一下，有三個(gè)小點(diǎn)需要了解：
注意：
1、在定義策略 LimitRequests 的時(shí)候，源域名應(yīng)該是客戶端 vue 項(xiàng)目的請(qǐng)求的端口域名，不是當(dāng)前API的域名端口。
2、上邊我們是在 configureService 里配置的策略，其實(shí)我們?cè)谙乱徊降闹虚g件也可以配置策略，這里就不細(xì)說(shuō)了，防止混淆。
CORS的配置一定要放在AutoFac前面,否則builder.Populate(services);后,你再進(jìn)行配置會(huì)沒(méi)有效果。
3、啟動(dòng)中間件
在啟動(dòng)文件 的 中間件管道配置 Configure 種，添加啟用Cors中間件服務(wù)，但是千萬(wàn)要注意順序。
public void Configure(IApplicationBuilder app){ ... app.UseStaticFiles(); app.UseRouting(); app.UseCors();//添加 Cors 跨域中間件 app.UseAuthentication(); app.UseAuthorization(); app.UseEndpoints(endpoints => { endpoints.MapControllers(); });注意：如果你使用了 app.UserMvc() 或者 app.UseHttpsRedirection()這類的中間件，一定要把 app.UseCors() 寫在它們的上邊，先進(jìn)行跨域，再進(jìn)行 Http 請(qǐng)求，否則會(huì)提示跨域失敗。
因?yàn)檫@兩個(gè)都是涉及到 Http請(qǐng)求的，如果你不跨域就直接轉(zhuǎn)發(fā)或者mvc，那肯定報(bào)錯(cuò)。
4、運(yùn)行調(diào)試，一切正常
至此，跨域的問(wèn)題已經(jīng)完成辣，我們通過(guò)分離后的，前端的項(xiàng)目工程，來(lái)訪問(wèn)api，已經(jīng)成功了，這里會(huì)有兩個(gè)常見(jiàn)的問(wèn)題，這里簡(jiǎn)單列舉一下：
5、IIS 部署常見(jiàn)的跨域錯(cuò)誤
1、如果遇到了跨域失敗的提示，比如這樣：
這個(gè)并不一定是沒(méi)有配置好導(dǎo)致的跨域失敗，還有可能是接口有錯(cuò)誤，比如 500了，導(dǎo)致的接口異常，所以就提示訪問(wèn)有錯(cuò)誤。
2、可能部署到服務(wù)器的時(shí)候，會(huì)出現(xiàn) Put 和 Delete 謂詞不能用的問(wèn)題。
這個(gè)很簡(jiǎn)單，是因?yàn)?IIS 不支持，添加進(jìn)去進(jìn)行了，在發(fā)布好的 web.config 文件里：
①刪除IIS安裝的WebDav模塊，選擇你的項(xiàng)目，右邊有個(gè)“模塊”，雙擊它；找到WebDavModule，刪除它。
②修改你項(xiàng)目的web.config ，在標(biāo)簽內(nèi)加上以下代碼。
現(xiàn)在咱們繼續(xù)聊聊 CORS 的優(yōu)劣有哪些：
優(yōu)勢(shì)：
1、支持所有的 Http 謂詞請(qǐng)求；
2、支持多種輸出格式，主要是json；
3、可用在生產(chǎn)環(huán)境；
4、同時(shí)配置多個(gè)前端項(xiàng)目；
劣勢(shì)：
1、配置太偏重后端；
2、會(huì)暴露后端api域名或端口；
從上邊咱們可以看出來(lái)，CORS 優(yōu)點(diǎn)還是很多的，我們平時(shí)的開發(fā)基本也是使用的這個(gè)，應(yīng)用范圍也特別的廣泛，但是也是有一兩個(gè)小問(wèn)題的，就比如我們平時(shí)開發(fā)的時(shí)候，可能時(shí)不時(shí)前端vue項(xiàng)目就會(huì)修改端口，那就只能讓后端工程師來(lái)修改配置了。
亦或者，雖然接口數(shù)據(jù)很正常被獲取，但是接口地址還是不想暴露出去，欸？！那咋辦，有辦法，就說(shuō)說(shuō)今天的第二個(gè)重頭戲 —— Proxy 代理！
?
?四、webpack 的?proxy 代理
1、Vue-Cli 3.0 新增全局配置文件 vue.config.js
vue項(xiàng)目搭建的時(shí)候，會(huì)有一個(gè)全局config配置文件，在 vue-cli 2.0 腳手架中，很明顯的把它放到了 config 的一個(gè)文件夾中，是這樣的，我們?cè)?index.js 中可以端口號(hào)的配置，打包之后路徑的配置，圖片的配置 等等
但是 vue-cli 3.0 腳手架中，去掉了 config 這個(gè)文件夾，那我們?nèi)绾闻渲媚?#xff0c;我們可以在項(xiàng)目根目錄新建一個(gè) vue.config.js 文件，像之前的很多繁瑣配置，都可以在這個(gè)文件里配置啦。官方說(shuō)明，vue.config.js 是一個(gè)可選的配置文件，如果項(xiàng)目的 (和 package.json 同級(jí)的) 根目錄中存在這個(gè)文件，那么它會(huì)被 @vue/cli-service 自動(dòng)加載。你也可以使用 package.json 中的 vue 字段，但是注意這種寫法需要你嚴(yán)格遵照 JSON 的格式來(lái)寫。
?我們就在根目錄下新建該文件，然后添加內(nèi)容：
module.exports = { // 基本路徑 baseUrl: "/", // 輸出文件目錄 outputDir: "dist", // eslint-loader 是否在保存的時(shí)候檢查 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相關(guān)配置 css: { // 是否使用css分離插件 ExtractTextPlugin extract: true, // 開啟 CSS source maps? sourceMap: false, // css預(yù)設(shè)器配置項(xiàng) 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 插件相關(guān)配置 // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa pwa: {}, // webpack-dev-server 相關(guān)配置 devServer: { open: true, //配置自動(dòng)啟動(dòng)瀏覽器 host: "127.0.0.1",//主機(jī) port: 6688, // 端口號(hào)自定義 https: false,//是否開啟https安全協(xié)議 hotOnly: false, // https:{type:Boolean} proxy: null, // 設(shè)置代理 before: app => {} }, // 第三方插件配置 pluginOptions: { // ... }};相應(yīng)的注釋都有，主要是配置 devServer 節(jié)點(diǎn)，從名字上也能看出來(lái)，這個(gè)是 dev 開發(fā)環(huán)境的服務(wù)配置，常用來(lái)配置我們的端口號(hào) port ，還有一個(gè)就是 proxy 的設(shè)置代理。
2、配置 proxy?本地代理
?將上邊的 proxy: null 注釋掉，然后修改代理設(shè)置：
proxy: { // 配置多個(gè)代理 "/api": {//定義代理名稱 target: "http://xxxx:8081",//我們的接口域名地址 ws: true, changeOrigin: true,//允許跨域 pathRewrite: { // 路徑重寫，???????????"^/api":?""?//?替換target中的請(qǐng)求地址，這樣請(qǐng)求地址種，就不包含api這個(gè)字符串了 } } },這樣，我們就把接口地址代理到了本地，那代理到本地，如何調(diào)用呢，請(qǐng)往下看。
3、修改接口api地址，http.js文件
還記得我們?cè)?src 文件夾下有一個(gè) api/http.js 文件么，這個(gè)就是配置我們的 http 請(qǐng)求相關(guān)的，其他的都不變，我們只需要把域名去掉即可，或者寫上本項(xiàng)目的域名：
// 配置API接口地址var root = "/api/";//配置 proxy 代理的api地址，
其實(shí)說(shuō)白了，就是在項(xiàng)目啟動(dòng)的時(shí)候，在node服務(wù)器中，是把所有的??
/api開頭的接口字符串，也就是這樣的http://localhost:6688/api的都指向了
http://xxxx:8081 域名，這樣就實(shí)現(xiàn)了跨域
其他任何都不需要變，接口的使用還是原來(lái)的使用方法，這樣，我們?cè)诒镜亻_發(fā)的時(shí)候，就可以獲取到后端api數(shù)據(jù)了，不用再去 .net core 中設(shè)置跨域CORS了，是不是很方便。
說(shuō)句簡(jiǎn)單的：就是把后端的端口，給代理到了當(dāng)前的前端端口，實(shí)現(xiàn)了跨域，就好像 node 服務(wù)，作為要給代理人的身份，來(lái)處理。
4、本地瀏覽效果
記得我們修改 vue.config.js 后要重啟下服務(wù)，然后就可以看到項(xiàng)目成功獲取數(shù)據(jù)，并代理到本地：
可以看到，我們已經(jīng)把遠(yuǎn)程接口數(shù)據(jù) 123.206.33.109 成功的代理到了本地 localhost:6688 ，是不是很簡(jiǎn)單！
5、build 打包發(fā)布 IIS
?那我們本地開發(fā)好了，是不是一切都穩(wěn)妥了呢，我們可以試一試，通過(guò) build 打包，生成 dist 文件夾，然后將文件夾拷貝到服務(wù)器，并配置 IIS ，這個(gè)很簡(jiǎn)單，就和配置普通靜態(tài)頁(yè)面是一樣的，
我們發(fā)現(xiàn)雖然頁(yè)面可以瀏覽(可以渲染，證明我們的 vue 已經(jīng)生效)，但是卻獲取不到數(shù)據(jù)，這證明我們上邊的 proxy 代理，只是適用本地dev開發(fā)環(huán)境中：
雖然這個(gè)本地代理的方法很簡(jiǎn)單，特別適合我們獨(dú)立開發(fā)，在跨域這一塊，完全不用和后端做處理，但是服務(wù)器生產(chǎn)環(huán)境是不行的，那怎么辦，既然本地的 node 服務(wù)可以代理，那打包后的 html 靜態(tài)項(xiàng)目，有沒(méi)有一個(gè)人站出來(lái)，充當(dāng)代理的角色呢，哎！還真有，就是Nginx；
?五、基于Nginx 的反向代理
這篇文章僅僅是如何使用 Nginx 作為一個(gè)反向代理服務(wù)器，具體的深入原理以及負(fù)載均衡器等等，我會(huì)在以后的微服務(wù)系列中說(shuō)到(不知不覺(jué)又給自己玩了一個(gè)坑?)。
1、Nginx的代理工作原理
反向代理(Reverse Proxy)方式是指以代理服務(wù)器來(lái)接受 Internet上 的連接請(qǐng)求，然后將請(qǐng)求轉(zhuǎn)發(fā)給內(nèi)部網(wǎng)絡(luò)上的服務(wù)器；并將從服務(wù)器上得到的結(jié)果返回給 Internet 上請(qǐng)求連接的客戶端，此時(shí)代理服務(wù)器對(duì)外就表現(xiàn)為一個(gè)服務(wù)器。
通常的代理服務(wù)器，只用于代理內(nèi)部網(wǎng)絡(luò)對(duì) Internet 外部網(wǎng)絡(luò)的連接請(qǐng)求，客戶機(jī)必須指定代理服務(wù)器，并將本來(lái)要直接發(fā)送到 Web 服務(wù)器上的 http 請(qǐng)求發(fā)送到代理服務(wù)器中。不支持外部網(wǎng)絡(luò)對(duì)內(nèi)部網(wǎng)絡(luò)的連接請(qǐng)求，因?yàn)閮?nèi)部網(wǎng)絡(luò)對(duì)外部網(wǎng)絡(luò)是不可見(jiàn)的。當(dāng)一個(gè)代理服務(wù)器能夠代理外部網(wǎng)絡(luò)上的主機(jī)， 訪問(wèn)內(nèi)部網(wǎng)絡(luò)時(shí)，這種代理服務(wù)的方式稱為反向代理服務(wù)。此時(shí)代理服務(wù)器對(duì)外就表現(xiàn)為一個(gè)Web服務(wù)器，外部網(wǎng)絡(luò)就可以簡(jiǎn)單把它當(dāng)作一個(gè)標(biāo)準(zhǔn)的 Web 服務(wù)器 而不需要特定的配置。不同之處在于，這個(gè)服務(wù)器沒(méi)有保存任何網(wǎng)頁(yè)的真實(shí)數(shù)據(jù)，所有的靜態(tài)網(wǎng)頁(yè)或者CGI程序，都保存在內(nèi)部的Web服務(wù)器上。因此對(duì)反向代 理服務(wù)器的攻擊并不會(huì)使得網(wǎng)頁(yè)信息遭到破壞，這樣就增強(qiáng)了Web服務(wù)器的安全性。
總結(jié)來(lái)說(shuō)呢，就是我們通過(guò) nginx 反向代理服務(wù)器處理我們的請(qǐng)求，具體的數(shù)據(jù)處理還是交給 IIS，然后得到處理過(guò)的數(shù)據(jù)以后，我們?cè)侔l(fā)送給 Internet 請(qǐng)求的客戶端，這樣就不會(huì)存在跨域的問(wèn)題了。
?
2、Nginx 下載與使用
下載地址：http://nginx.org/en/download.html
?
我選擇下載穩(wěn)定版 1.14 ，下載好后解壓，然后就看到根目錄下的 Nginx.exe ，直接雙擊即可開啟服務(wù)，然后就會(huì)在任務(wù)管理器查看到已經(jīng)啟動(dòng)的 Nginx 代理服務(wù)。
因?yàn)槟J(rèn)的是80端口，大家的端口應(yīng)該都已經(jīng)被占用，所以我們需要修改端口
打開 config 文件夾下的 nginx.conf 文件，然后修改端口號(hào)
server { listen 8077; server_name localhost;這個(gè)很簡(jiǎn)單，這個(gè)時(shí)候記得要重啟 Nginx 服務(wù)，你可以采用命令的形式，不過(guò)我有時(shí)候會(huì)發(fā)現(xiàn)無(wú)效，我一般使用的時(shí)候，在任務(wù)管理器中把所有的 nginx 進(jìn)程全部結(jié)束，然后雙擊 nginx.exe 開啟。
這個(gè)時(shí)候我們直接訪問(wèn) localhost:8077 就發(fā)現(xiàn)已經(jīng)啟動(dòng)成功了，只不過(guò)是 nginx 的歡迎頁(yè)。
這個(gè)時(shí)候你一定好奇，為什么僅僅配置下，就能訪問(wèn)該端口呢，不信的話，你可以在 cmd 中 通過(guò) netstat -an 命令來(lái)查看 8077 端口是否被使用
發(fā)現(xiàn)已經(jīng)被監(jiān)聽(tīng)使用，如果還不相信，你可以創(chuàng)建一個(gè) IIS 項(xiàng)目，然后配置 8077 端口，發(fā)現(xiàn)會(huì)報(bào)錯(cuò)，這也就是說(shuō)明了，8077端口已經(jīng)被占用，準(zhǔn)確來(lái)說(shuō)是被 Nginx 占用的，所以，Nginx 和 IIS一樣都是可以作為反向代理服務(wù)器來(lái)使用，從而可以通過(guò)監(jiān)聽(tīng)端口來(lái)代理我們的項(xiàng)目的：?
3、將上文打包后的 dist 文件，配置 Nginx 代理
1、將我們上邊 build 后的 dist 文件，放到咱們下載的 nginx 下的 html文件夾
2、配置代理
還是我們的 config/nginx.conf 文件，打開并配置 本地代理 ，注意注釋是用 # 號(hào)，不是 //
server { listen 8077;#監(jiān)聽(tīng)端口，也就是我們的項(xiàng)目端口 server_name localhost;#服務(wù)器主機(jī) location / { root html;#監(jiān)聽(tīng)文件夾，默認(rèn)是nginx下的html文件夾，也可以自定義物理路徑 E:\\Nginx\\test index index.html index.htm;#默認(rèn)首次啟動(dòng)的文件 } #配置本地代理規(guī)則 location /api {#名字取一個(gè) api rewrite ^.+apb/?(.*)$ /$1 break; #路徑重寫機(jī)制(無(wú)用，但是你也可以自己定義，對(duì)路由進(jìn)行變化) include uwsgi_params; proxy_pass http://123.206.33.109:8081; #api接口的域名地址 }相應(yīng)的注釋已經(jīng)寫好了，自己看看就明白了，和上邊 node 的proxy代理是一個(gè)邏輯。
4、本地以及服務(wù)器發(fā)布預(yù)覽
這個(gè)時(shí)候，你再訪問(wèn) localhost:8077 就能看到我們的項(xiàng)目?jī)?nèi)容了，訪問(wèn)頁(yè)面也能看到我們的數(shù)據(jù)了，代理成功！?
?
這個(gè)時(shí)候僅僅是本地，那服務(wù)器行不行呢，我們只需要將我們的 nginx 文件夾拷貝到服務(wù)器，并且雙擊 nginx.exe 啟動(dòng)代理服務(wù)，然后就可以啦！
是不是很簡(jiǎn)單，只需要把http.js 的baseurl 修改一下，
完全不用修改我們?nèi)魏蔚恼{(diào)用接口地址，也不用修改前端代理，更不用修改后端配置，就可以實(shí)現(xiàn)跨域。
5、刷新后出現(xiàn) 404
如果是IIS部署
1、如果你是 IIS 部署，就使用 hash 模式；
2、如果用IIS，也想用 history 模式，可以配置 URL重寫：https://router.vuejs.org/zh/guide/essentials/history-mode.html#后端配置例子
如果是Nginx部署：
1、不過(guò)如果用 nginx 的話，可以利用 404 頁(yè)面的機(jī)制，將 index.html 頁(yè)面 copy 一份，重命名成 404.html 即可；
?
2、如果不想添加一個(gè) 404 文件的話 ，就直接修改下 nginx 的配置文件(推薦)
官方解釋：https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90
?
?六、結(jié)語(yǔ)
本篇文章通過(guò)四種方法來(lái)實(shí)現(xiàn)了跨域問(wèn)題，不僅僅是在 Vue 項(xiàng)目中，其他任何都可以這么使用，完美的解決了問(wèn)題，與 CORS 相比，Nginx 更有前端主動(dòng)權(quán)，各有利弊，我更傾向于 Nginx 代理，因?yàn)橐院髸?huì)涉及到負(fù)載均衡的使用，這里再最后總結(jié)一下：
0、不跨域 —— 前后端寫在一起，我還真的有一個(gè)項(xiàng)目是把Vue 和 .net 整合到一起了，不說(shuō)明 ?；
1、JSONP —— 在JQ中挺好，弊端明顯，淺嘗輒止 ?。
2、CORS —— 這個(gè)是我在跨域中遇到的神器，優(yōu)缺點(diǎn)上邊也說(shuō)了，還是很不錯(cuò)的，推薦 ????。
3、webpack 本地代理 —— dev 環(huán)境的一大神器，只需在 webpack 中三行配置，即可代理到本地，只能在本地，大弊端，不過(guò)如果是本地開發(fā)的話，推薦使用 ???。
4、Nginx 反向代理 —— 特別靈活，而且也不用關(guān)心前后端項(xiàng)目，實(shí)現(xiàn)解耦的目的，加上后期可以配合負(fù)載均衡，強(qiáng)烈推薦?????。
?七、Github
https://github.com/anjoy8/Blog.Core
總結(jié)
以上是生活随笔為你收集整理的ajax 跨域请求api_【.NET Core 3.0】框架之十二 || 跨域 与 Proxy的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： qt designer 自定义插件找不到
- 下一篇： 抽象工厂模式_设计模式系列—抽象工厂模式