資訊專欄INFORMATION COLUMN
摘要：三反向代理解決的原理將安裝在本地，然后將項目部署于下，這樣訪問本地項目時用本地項目即可訪問。這樣瀏覽器之間的請求完全滿足瀏覽器域名協(xié)議端口相同的同源策略，可在不改變后臺接口的情況下避免跨域問題。
一、問題背景說明：
編寫移動前端頁面時需要訪問后臺系統(tǒng)接口。前端項目在本地（個人辦公電腦）開發(fā)，后臺接口存放后生產(chǎn)的后臺服務(wù)器，本地的ajax請求無法直接訪問后臺接口，也就是遇到了跨域問題，如何在不改變后臺接口的情況下解決跨域問題？
二、同源/跨域概念說明：
同源策略：是瀏覽器的一種安全策略，所謂同源是指域名、協(xié)議、端口完全相同，只有同源的地址才可以相互通過ajax的方式請求。
跨域：同源或不同源說的是兩個地址之間的關(guān)系，不同源地址之間的請求我們稱之為跨域請求。
三、nginx反向代理解決的原理：
將nginx安裝在本地，然后將項目部署于nginx下，這樣訪問本地項目時用http://localhost/本地項目 即可訪問。
然后配置nginx，通過反向代理的方式訪問后臺服務(wù)器，訪問后臺接口時使用http://localhost/后臺接口名稱 即可跳轉(zhuǎn)到后臺服務(wù)器。
這樣瀏覽器之間的ajax請求完全滿足瀏覽器域名、協(xié)議、端口相同的同源策略，可在不改變后臺接口的情況下避免跨域問題。
四、安裝和配置nginx
過程主要參考了以下兩篇文章，對原理的描述很清晰、完善：
nginx解決跨域文章：https://www.cnblogs.com/renji...
nginx配置文章：http://www.cnblogs.com/renjin...
1）首先到nginx官網(wǎng)下載安裝包：http://nginx.org/en/download....
2）windows版本nginx使用方法簡要說明（cmd窗口下）：
幫助： nginx -h
啟動： start nginx
重載（nginx配置更新后可使用）：nginx -s reload
停止： nginx -s stop 或者 nginx -s quit
3）nginx.conf 配置本地web項目訪問路徑和反向代理：
server {
listen 80; //nginx服務(wù)器啟動后的默認監(jiān)聽端口，可按自身情況修改
server_name localhost; //nginx服務(wù)器的名稱，
#charset koi8-r;
#access_log logs/host.access.log main;
//以下是本地項目的部署配置：配置web服務(wù)器的根目錄訪問地址
location / {
root myApp/mobile;
index index.html index.htm;
}
//以下是反向代理訪問遠程的后臺接口的配置
location /remote-interface/{
//下面是反向代理配置，通過nginx服務(wù)器訪問本地/remote-interface時，會將請求轉(zhuǎn)到后臺實際服務(wù)器去處理
proxy_pass http://remote-address/remote-interface/ ;
}
以上就是nginx本地項目部署和反向代理的配置。配置完成后，即可在項目中使用ajax請求訪問后臺接口。
五、發(fā)送ajax請求試驗
本地項目中的ajax請求的代碼示例如下，重點注意ajax請求的URL，要與nginx.conf的配置對應(yīng)上：
var reqData = { //post請求參數(shù)
"xxx":xxx,
}
$.post("/remote-interface/interface-name", reqData, function (data, status) {
// console.log(arguments);
if (status != "success") { //post請求響應(yīng)為失敗的處理
console.log(status);
return;
}
///請求得到響應(yīng)數(shù)據(jù)后的處理操作可寫在這里
}, "json").error(function () {
// console.log(arguments)
});
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/40091.html
摘要：三反向代理解決的原理將安裝在本地，然后將項目部署于下，這樣訪問本地項目時用本地項目即可訪問。這樣瀏覽器之間的請求完全滿足瀏覽器域名協(xié)議端口相同的同源策略，可在不改變后臺接口的情況下避免跨域問題。 一、問題背景說明： 編寫移動前端頁面時需要訪問后臺系統(tǒng)接口。前端項目在本地（個人辦公電腦）開發(fā)，后臺接口存放后生產(chǎn)的后臺服務(wù)器，本地的ajax請求無法直接訪問后臺接口，也就是遇到了跨域問題...
摘要：需注意的是由于同源策略的限制，所讀取的為跨域請求接口所在域的，而非當前頁。目前，所有瀏覽器都支持該功能需要使用對象來支持，也已經(jīng)成為主流的跨域解決方案。反向代理接口跨域跨域原理同源策略是瀏覽器的安全策略，不是協(xié)議的一部分。 什么是跨域？ 跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源，這里跨域是廣義的。 廣義的跨域： 1.) 資源跳轉(zhuǎn)： A鏈接、重定向、表單提交 2.) 資源...
摘要：二跨域解決方案原理利用標簽沒有跨域限制的漏洞，網(wǎng)頁可以得到從其他來源動態(tài)產(chǎn)生的數(shù)據(jù)。使用反向代理實現(xiàn)跨域，是最簡單的跨域方式。 前言 前后端數(shù)據(jù)交互經(jīng)常會碰到請求跨域，什么是跨域，以及有哪幾種跨域方式，這是本文要探討的內(nèi)容。 本文完整的源代碼請猛戳github博客，紙上得來終覺淺，建議動手敲敲代碼 一、什么是跨域？ 1.什么是同源策略及其限制內(nèi)容？ 同源策略是一種約定，它是瀏覽器最核心...
閱讀 2342·2021-09-30 09:47
閱讀 2963·2019-08-30 11:05
閱讀 2536·2019-08-29 17:20
閱讀 1923·2019-08-29 13:01
閱讀 1731·2019-08-26 13:39
閱讀 1258·2019-08-26 13:26
閱讀 3214·2019-08-23 18:40
閱讀 1832·2019-08-23 17:09
