跨域概念簡(jiǎn)單來說：兩個(gè)url只要協(xié)議、域名、端口有任何一個(gè)不同，都被當(dāng)作是不同的域，相互訪問就會(huì)有跨域問題。 案例例如：在開發(fā)前后端完全分離的系統(tǒng)中，服務(wù)端代碼屬于一個(gè)工程，前端代碼屬于另一個(gè)工程，前端開發(fā)人員在進(jìn)行接口對(duì)接時(shí)，可能會(huì)在webstorm等工具進(jìn)行編碼，并用webstorm的內(nèi)置服務(wù)器進(jìn)行調(diào)試，這就會(huì)有跨域問題，因?yàn)?，webstorm內(nèi)置服務(wù)器默認(rèn)前綴部分是http://localhost:63342/，而服務(wù)端接口的路徑前綴部分一定不會(huì)是這樣，這樣便產(chǎn)生了跨域訪問的問題。 案例代碼例如如下這一段代碼，在webstorm中調(diào)試這個(gè)ajax所在的頁(yè)面，頁(yè)面路徑是http://localhost:63342/untitled/across-domain.html，而要訪問的接口路徑是http://localhost:8888/ssm/interfaces/test/m006 $(function(){
$.ajax({
url: 'http://localhost:8888/ssm/interfaces/test/m006',
type: 'POST',
async: false,
dataType: 'json',
contentType: 'application/json',
cache: false,
data: JSON.stringify({
'id': 'bgdsdgs',
'name': 'name',
'email': '429661318@qq.com',
'voModel2': [{
'id': '429661318@qq.com',
'v3': {'id':'sdfghjkl'}
}]
}),
success: function(data) {
$('#text').html(JSON.stringify(data));
},
error: function(text) {
$('text').html(JSON.stringify(text))
}
})
直接訪問，打開瀏覽器的控制臺(tái)查看，沒錯(cuò)，提示的正是無法進(jìn)行跨域訪問。 1、要解決這個(gè)問題很簡(jiǎn)單，只要使頁(yè)面的前綴和接口的前綴一致就可以了，因此可以使用nginx進(jìn)行反向代理。打開nginx目錄下的conf文件夾，在nginx.conf文件的配置如下 #默認(rèn)監(jiān)聽80端口，ip后面不加端口號(hào)默認(rèn)就是80
listen 80;
#服務(wù)器地址
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
#項(xiàng)目根目錄，一般就是啟動(dòng)頁(yè)
location / {
#項(xiàng)目所在目錄
root C:\Users\shengmengqi\WebstormProjects\angularJsFrame;
#假設(shè)across-domain.html的首頁(yè)，如果之后頁(yè)面中跳轉(zhuǎn)也是基于http://localhost/跳轉(zhuǎn)
index across-domain.html;
}
#作用：訪問的http://localhost/ssm/interfaces/相當(dāng)于一個(gè)代理url，實(shí)際訪問的
是http://localhost:8888/ssm/interfaces/
location /ssm/interfaces/{
proxy_pass http://localhost:8888/ssm/interfaces/;
}
2、配置完畢，將ajax中的接口路徑改為http://localhost/ssm/interfaces/test/m006，將ngnix啟動(dòng)起來，在任務(wù)管理器中是否有nginx進(jìn)程，有的話說明啟動(dòng)成功，如果沒有，可以查看nginx目錄下log文件夾中的error.log，看哪里有問題進(jìn)行修改，啟動(dòng)成功后，在瀏覽器地址欄直接訪問localhost，這次結(jié)果就正確了。 這次的請(qǐng)求其實(shí)是走了nginx代理服務(wù)器的 總結(jié)nginx的實(shí)際原理就是配置一個(gè)代理路徑替換實(shí)際的訪問路徑，使得瀏覽器認(rèn)為訪問的資源都是屬于相同協(xié)議，域名和端口的，而實(shí)際訪問的并不是代理路徑，而是通過代理路徑找到實(shí)際路徑進(jìn)行訪問，所以，不妨將nginx看作是給瀏覽器的一種障眼法好了，哈哈~ |
|
|
