今天就跟大家聊聊有關(guān)Nginx跨域訪問問題有哪些，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。
一、什么是跨域
簡單地理解就是因?yàn)镴avaScript同源策略的限制，a.com 域名下的js無法操作b.com或是c.a.com域名下的對象。
同源是指相同的協(xié)議、域名、端口。特別注意兩點(diǎn)：
如果是協(xié)議和端口造成的跨域問題“前臺”是無能為力的，
在跨域問題上，域僅僅是通過“協(xié)議+域名+端口”來識別，兩個不同的域名即便指向同一個ip地址，也是跨域的。
二、常見跨域情況
URL 說明 是否允許通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允許 http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一域名下不同文件夾 允許 http://www.a.com:8000/a.js http://www.a.com/b.js 同一域名，不同端口 不允許 http://www.a.com/a.js https://www.a.com/b.js 同一域名，不同協(xié)議 不允許 http://www.a.com/a.js 域名和域名對應(yīng)ip 不允許 http://www.a.com/a.js http://script.a.com/b.js 主域相同，子域不同 不允許 http://www.a.com/a.js http://a.com/b.js 同一域名，不同二級域名（同上）不允許（cookie這種情況下也不允許訪問） http://www.cnblogs.com/a.js http://www.a.com/b.js 不同域名 不允許特別注意兩點(diǎn)：
第一，如果是協(xié)議和端口造成的跨域問題“前臺”是無能為力的，第二：在跨域問題上，域僅僅是通過“URL的首部”來識別而不會去嘗試判斷相同的ip地址對應(yīng)著兩個域或兩個域是否在同一個ip上?！癠RL的首部”指window.location.protocol +window.location.host，也可以理解為“Domains, protocols and ports must match”。
三、跨域解決方案
有多種，大多是利用JS Hack
1、document.domain+iframe的設(shè)置
2、動態(tài)創(chuàng)建script
3、利用iframe和location.hash
4、window.name實(shí)現(xiàn)的跨域數(shù)據(jù)傳輸
5、使用HTML5 postMessage
6、利用flash 以上方案見http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html#m5
7、nginx反向代理 這個方法一般很少有人提及，但是他可以不用目標(biāo)服務(wù)器配合，不過需要你搭建一個中轉(zhuǎn)nginx服務(wù)器，用于轉(zhuǎn)發(fā)請求。
8、Jquery JSONP(本質(zhì)上就是動態(tài)創(chuàng)建script)http://www.cnblogs.com/chopper/archive/2012/03/24/2403945.html
9、跨域資源共享（CORS） 這就是我們要介紹的跨域解決方案，也是未來的跨域問題的標(biāo)準(zhǔn)解決方案
四、關(guān)于CORS
CORS: 跨域資源共享(Cross-Origin Resource Sharing)http://www.w3.org/TR/cors/
當(dāng)前幾乎所有的瀏覽器（Internet Explorer 8+， Firefox 3.5+， Safari 4+和 Chrome 3+）都可通過名為跨域資源共享（Cross-Origin Resource Sharing）的協(xié)議支持ajax跨域調(diào)用。(see: http://caniuse.com/#search=cors)
Chrome, Firefox, Opera and Safari 都使用的是 XMLHttpRequest2 對象， IE使用XDomainRequest。XMLHttpRequest2的Request屬性：open()、setRequestHeader()、timeout、withCredentials、upload、send()、send()、abort()。
XMLHttpRequest2的Response屬性：status、statusText、getResponseHeader()、getAllResponseHeaders()、entity、overrideMimeType()、responseType、response、responseText、responseXML。
1、啟用 CORS 請求
假設(shè)您的應(yīng)用已經(jīng)在 example.com 上了，而您想要從 www.example2.com 提取數(shù)據(jù)。一般情況下，如果您嘗試進(jìn)行這種類型的 AJAX 調(diào)用，請求將會失敗，而瀏覽器將會出現(xiàn)“源不匹配”的錯誤。利用 CORS，www.example2.com 服務(wù)端只需添加一個HTTP Response頭，就可以允許來自 example.com 的請求：
Access-Control-Allow-Origin: http://example.com
Access-Control-Allow-Credentials: true（可選）
可將 Access-Control-Allow-Origin 添加到某網(wǎng)站下或整個域中的單個資源。要允許任何域向您提交請求，請設(shè)置如下：
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true（可選）
其實(shí)，該網(wǎng)站 (html5rocks.com) 已在其所有網(wǎng)頁上均啟用了 CORS。啟用開發(fā)人員工具后，您就會在我們的響應(yīng)中看到 Access-Control-Allow-Origin 了。
2、CORS方法實(shí)現(xiàn)跨域請求
要實(shí)現(xiàn)CORS跨域，服務(wù)端需要這個一個流程:https://cache.yisu.com/upload/information/20200309/32/45401.jpg
對于簡單請求，如GET，只需要在HTTP Response后添加Access-Control-Allow-Origin。
對于非簡單請求，比如POST、PUT、DELETE等，瀏覽器會分兩次應(yīng)答。第一次preflight（method: OPTIONS），主要驗(yàn)證來源是否合法，并返回允許的Header等。第二次才是真正的HTTP應(yīng)答。所以服務(wù)器必須處理OPTIONS應(yīng)答。
http://enable-cors.org/server_nginx.html 這里是一個nginx啟用COSR的參考配置。
流程如下：
首先查看http頭部有無origin字段；
如果沒有，或者不允許，直接當(dāng)成普通請求處理，結(jié)束；
如果有并且是允許的，那么再看是否是preflight(method=OPTIONS)；
如果是preflight，就返回Allow-Headers、Allow-Methods等，內(nèi)容為空；
如果不是preflight，就返回Allow-Origin、Allow-Credentials等，并返回正常內(nèi)容。
首先，在遠(yuǎn)端需要訪問的主機(jī)上做設(shè)置，假如遠(yuǎn)端主機(jī)是nginx服務(wù)，那么添加如下信息即可。
server { listen 80; server_name tangxiaoyue.com; if ( $http_user_agent = "Mozilla/5.0"){ return 403; } location / { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; # Custom headers and headers various browsers *should* be OK with but aren't add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; 后面省略。。。 } }五、nginx反向代理解決跨域
禁止跨域問題其實(shí)是瀏覽器的一種安全行為，而現(xiàn)在的大多數(shù)解決方案都是用標(biāo)簽可以跨域訪問的這個漏洞或者是技巧去完成，但都少不了目標(biāo)服務(wù)器做相應(yīng)的改變，如果目標(biāo)服務(wù)器無法改變的時候，就需要本地服務(wù)器實(shí)現(xiàn)，本地實(shí)現(xiàn)的話，需要搭建一個nginx并把相應(yīng)代碼部署在它的下面，由頁面請求本域名的一個地址，轉(zhuǎn)由nginx代理到目標(biāo)服務(wù)器處理后返回結(jié)果給頁面，而且這一切都是同步的。
假如代理服務(wù)器地址是 www.c.com/proxy/html/api/msg?method=1=2; www.c.com是nginx主機(jī)地址
遠(yuǎn)端服務(wù)器地址：http://www.b.com/api/msg?method=1=2
在nginx服務(wù)器上做如下配置
在location下面再添加一個location。
location ^~/proxy/html/{
rewrite ^/proxy/html/(.*)$ /$1 break;
proxy_pass http://www.b.com/;
}
以下做一個解釋：
1.'^~ /proxy/html/ ‘
就像上面說的一樣是一個匹配規(guī)則，用于攔截請求，匹配任何以 /proxy/html/開頭的地址，匹配符合以后，停止往下搜索正則。
2.rewrite ^/proxy/html/(.*)$ /$1 break;
代表重寫攔截進(jìn)來的請求，并且只能對域名后邊的除去傳遞的參數(shù)外的字符串起作用，例如www.c.com/proxy/html/api/msg?method=1=2重寫。只對/proxy/html/api/msg重寫。
rewrite后面的參數(shù)是一個簡單的正則 ^/proxy/html/(.*)$ ,$1代表正則中的第一個(),$2代表第二個()的值,以此類推。
break代表匹配一個之后停止匹配。
看完上述內(nèi)容，你們對Nginx跨域訪問問題有哪些有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
重慶分公司
重慶分公司
