成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

通過(guò)nginx反向代理解決前端訪問(wèn)的跨域問(wèn)題

dongxiawu / 1679人閱讀

摘要：三反向代理解決的原理將安裝在本地，然后將項(xiàng)目部署于下，這樣訪問(wèn)本地項(xiàng)目時(shí)用本地項(xiàng)目即可訪問(wèn)。這樣瀏覽器之間的請(qǐng)求完全滿足瀏覽器域名協(xié)議端口相同的同源策略，可在不改變后臺(tái)接口的情況下避免跨域問(wèn)題。

一、問(wèn)題背景說(shuō)明：
編寫(xiě)移動(dòng)前端頁(yè)面時(shí)需要訪問(wèn)后臺(tái)系統(tǒng)接口。前端項(xiàng)目在本地（個(gè)人辦公電腦）開(kāi)發(fā)，后臺(tái)接口存放后生產(chǎn)的后臺(tái)服務(wù)器，本地的ajax請(qǐng)求無(wú)法直接訪問(wèn)后臺(tái)接口，也就是遇到了跨域問(wèn)題，如何在不改變后臺(tái)接口的情況下解決跨域問(wèn)題？

二、同源/跨域概念說(shuō)明：
同源策略：是瀏覽器的一種安全策略，所謂同源是指域名、協(xié)議、端口完全相同，只有同源的地址才可以相互通過(guò)ajax的方式請(qǐng)求。
跨域：同源或不同源說(shuō)的是兩個(gè)地址之間的關(guān)系，不同源地址之間的請(qǐng)求我們稱之為跨域請(qǐng)求。

三、nginx反向代理解決的原理：

將nginx安裝在本地，然后將項(xiàng)目部署于nginx下，這樣訪問(wèn)本地項(xiàng)目時(shí)用http://localhost/本地項(xiàng)目 即可訪問(wèn)。
然后配置nginx，通過(guò)反向代理的方式訪問(wèn)后臺(tái)服務(wù)器，訪問(wèn)后臺(tái)接口時(shí)使用http://localhost/后臺(tái)接口名稱 即可跳轉(zhuǎn)到后臺(tái)服務(wù)器。
這樣瀏覽器之間的ajax請(qǐng)求完全滿足瀏覽器域名、協(xié)議、端口相同的同源策略，可在不改變后臺(tái)接口的情況下避免跨域問(wèn)題。

四、安裝和配置nginx
過(guò)程主要參考了以下兩篇文章，對(duì)原理的描述很清晰、完善：
nginx解決跨域文章：https://www.cnblogs.com/renji...
nginx配置文章：http://www.cnblogs.com/renjin...

1）首先到nginx官網(wǎng)下載安裝包：http://nginx.org/en/download....
2）windows版本nginx使用方法簡(jiǎn)要說(shuō)明（cmd窗口下）：
幫助： nginx -h
啟動(dòng)： start nginx
重載（nginx配置更新后可使用）：nginx -s reload
停止： nginx -s stop 或者 nginx -s quit
3）nginx.conf 配置本地web項(xiàng)目訪問(wèn)路徑和反向代理：

    server {
        listen       80;              //nginx服務(wù)器啟動(dòng)后的默認(rèn)監(jiān)聽(tīng)端口，可按自身情況修改
        server_name  localhost;        //nginx服務(wù)器的名稱，

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        
        //以下是本地項(xiàng)目的部署配置：配置web服務(wù)器的根目錄訪問(wèn)地址
        location / {
            root   myApp/mobile;
            index  index.html index.htm;
        }
        
        //以下是反向代理訪問(wèn)遠(yuǎn)程的后臺(tái)接口的配置
        location /remote-interface/{
        //下面是反向代理配置，通過(guò)nginx服務(wù)器訪問(wèn)本地/remote-interface時(shí)，會(huì)將請(qǐng)求轉(zhuǎn)到后臺(tái)實(shí)際服務(wù)器去處理
            proxy_pass  http://remote-address/remote-interface/ ; 
        }

以上就是nginx本地項(xiàng)目部署和反向代理的配置。配置完成后，即可在項(xiàng)目中使用ajax請(qǐng)求訪問(wèn)后臺(tái)接口。

五、發(fā)送ajax請(qǐng)求試驗(yàn)
本地項(xiàng)目中的ajax請(qǐng)求的代碼示例如下，重點(diǎn)注意ajax請(qǐng)求的URL，要與nginx.conf的配置對(duì)應(yīng)上：

var reqData = {             //post請(qǐng)求參數(shù)
                    "xxx":xxx,
            }

            $.post("/remote-interface/interface-name", reqData, function (data, status) {
                // console.log(arguments);
                if (status != "success") {     //post請(qǐng)求響應(yīng)為失敗的處理
                    console.log(status);
                    return;
                }
            
            ///請(qǐng)求得到響應(yīng)數(shù)據(jù)后的處理操作可寫(xiě)在這里
               
            }, "json").error(function () {
                // console.log(arguments)
            });

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/97273.html

相關(guān)文章

  • 通過(guò)nginx反向代理解決前端訪問(wèn)的跨域問(wèn)題

    摘要：三反向代理解決的原理將安裝在本地，然后將項(xiàng)目部署于下，這樣訪問(wèn)本地項(xiàng)目時(shí)用本地項(xiàng)目即可訪問(wèn)。這樣瀏覽器之間的請(qǐng)求完全滿足瀏覽器域名協(xié)議端口相同的同源策略，可在不改變后臺(tái)接口的情況下避免跨域問(wèn)題。 一、問(wèn)題背景說(shuō)明： 編寫(xiě)移動(dòng)前端頁(yè)面時(shí)需要訪問(wèn)后臺(tái)系統(tǒng)接口。前端項(xiàng)目在本地（個(gè)人辦公電腦）開(kāi)發(fā)，后臺(tái)接口存放后生產(chǎn)的后臺(tái)服務(wù)器，本地的ajax請(qǐng)求無(wú)法直接訪問(wèn)后臺(tái)接口，也就是遇到了跨域問(wèn)題...

    paulquei 評(píng)論0 收藏0

  • 前端常見(jiàn)跨域解決方案（全）

    摘要：需注意的是由于同源策略的限制，所讀取的為跨域請(qǐng)求接口所在域的，而非當(dāng)前頁(yè)。目前，所有瀏覽器都支持該功能需要使用對(duì)象來(lái)支持，也已經(jīng)成為主流的跨域解決方案。反向代理接口跨域跨域原理同源策略是瀏覽器的安全策略，不是協(xié)議的一部分。 什么是跨域？ 跨域是指一個(gè)域下的文檔或腳本試圖去請(qǐng)求另一個(gè)域下的資源，這里跨域是廣義的。 廣義的跨域： 1.) 資源跳轉(zhuǎn)： A鏈接、重定向、表單提交 2.) 資源...

    canger 評(píng)論0 收藏0

  • 徹底弄懂跨域問(wèn)題

    摘要：瀏覽器同源策略我們?yōu)楹我芯靠缬騿?wèn)題因?yàn)闉g覽器的同源策略規(guī)定某域下的客戶端在沒(méi)明確授權(quán)的情況下，不能讀寫(xiě)另一個(gè)域的資源。 跨域，老生常談的問(wèn)題 簡(jiǎn)述 作為一只前端菜鳥(niǎo)，跨域方面只懂得JSONP和CORS，并未曾深入了解。但隨著春招越來(lái)越近，就算是菜鳥(niǎo)也要猛振翅膀。近幾日仔細(xì)研究了跨域問(wèn)題，寫(xiě)下這篇文章，希望對(duì)開(kāi)發(fā)者們有所幫助。在讀本文前，希望您對(duì)以下知識(shí)略有了解。 瀏覽器同源策略 n...

    CoorChice 評(píng)論0 收藏0

  • 徹底弄懂跨域問(wèn)題

    摘要：用于告知瀏覽器可以將預(yù)先檢查請(qǐng)求返回結(jié)果緩存的時(shí)間，在緩存有效期內(nèi)，瀏覽器會(huì)使用緩存的預(yù)先檢查結(jié)果判斷是否發(fā)送跨域請(qǐng)求。 跨域，老生常談的問(wèn)題 簡(jiǎn)述 作為一只前端菜鳥(niǎo)，跨域方面只懂得JSONP和CORS，并未曾深入了解。但隨著春招越來(lái)越近，就算是菜鳥(niǎo)也要猛振翅膀。近幾日仔細(xì)研究了跨域問(wèn)題，寫(xiě)下這篇文章，希望對(duì)開(kāi)發(fā)者們有所幫助。在讀本文前，希望您對(duì)以下知識(shí)略有了解。 瀏覽器同源策略 n...

    rose 評(píng)論0 收藏0

  • 九種跨域方式實(shí)現(xiàn)原理（完整版）

    摘要：二跨域解決方案原理利用標(biāo)簽沒(méi)有跨域限制的漏洞，網(wǎng)頁(yè)可以得到從其他來(lái)源動(dòng)態(tài)產(chǎn)生的數(shù)據(jù)。使用反向代理實(shí)現(xiàn)跨域，是最簡(jiǎn)單的跨域方式。 前言 前后端數(shù)據(jù)交互經(jīng)常會(huì)碰到請(qǐng)求跨域，什么是跨域，以及有哪幾種跨域方式，這是本文要探討的內(nèi)容。 本文完整的源代碼請(qǐng)猛戳github博客，紙上得來(lái)終覺(jué)淺，建議動(dòng)手敲敲代碼 一、什么是跨域？ 1.什么是同源策略及其限制內(nèi)容？ 同源策略是一種約定，它是瀏覽器最核心...

    edgardeng 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<