建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要為大家分享javascript解決跨域問題的方法。文中還介紹了跨域的概念以及跨域的訪問示例，希望大家通過這篇文章能有所收獲。
創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比和布克賽爾蒙古網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式和布克賽爾蒙古網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋和布克賽爾蒙古地區(qū)。費(fèi)用合理售后完善，10多年實(shí)體公司更值得信賴。
1.什么是跨域？
跨域：指的是瀏覽器不能執(zhí)行其他網(wǎng)站的腳本。它是由瀏覽器的同源策略造成的，是瀏覽器對(duì)javascript施加的安全限制。
例如：a頁面想獲取b頁面資源，如果a、b頁面的協(xié)議、域名、端口、子域名不同，所進(jìn)行的訪問行動(dòng)都是跨域的，而瀏覽器為了安全問題一般都限制了跨域訪問，也就是不允許跨域請(qǐng)求資源。注意：跨域限制訪問，其實(shí)是瀏覽器的限制。理解這一點(diǎn)很重要?。。?/p>
同源策略：是指協(xié)議，域名，端口都要相同，其中有一個(gè)不同都會(huì)產(chǎn)生跨域；
2.跨域訪問示例
假設(shè)有兩個(gè)網(wǎng)站，A網(wǎng)站部署在：http://localhost:81 即本地ip端口81上；
B網(wǎng)站部署在：http://localhost:82 即本地ip端口82上?，F(xiàn)在A網(wǎng)站的頁面想去訪問B網(wǎng)站的信息，A網(wǎng)站頁面的代碼如下（這里使用jquery的異步請(qǐng)求）
$(function (){
$.get("http://localhost:82/api/values", {},function (result) {
$("#show").html(result);
})})；
從錯(cuò)誤信息可以看出以上出現(xiàn)了跨域問題！
3.如何解決跨域問題？
由之前的介紹我們已經(jīng)知道錯(cuò)誤的原因，既然跨域會(huì)產(chǎn)生問題，那么我們就不跨域不就完了嘛?。。?/p>
先上圖：
首先我們用nginx作為代理服務(wù)器和用戶交互，這樣用戶就只需要在80端口上進(jìn)行交互就可以了，這樣就避免了跨域問題，因?yàn)槲覀兌际窃?0端口上進(jìn)行交互的；
下面我們看一下利用nginx作為反向代理的具體配置：
server {
listen 80; #監(jiān)聽80端口，可以改成其他端口
server_name localhost; # 當(dāng)前服務(wù)的域名
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
proxy_pass http://localhost:81;
proxy_redirect default;
}
location /apis { #添加訪問目錄為/apis的代理配置
rewrite ^/apis/(.*)$ /$1 break;
proxy_pass http://localhost:82;
}
#以下配置省略1.當(dāng)用戶發(fā)送localhost:80/時(shí)會(huì)被nginx轉(zhuǎn)發(fā)到http://localhost:81服務(wù)；
2.當(dāng)界面請(qǐng)求接口數(shù)據(jù)時(shí)，只要以/apis 為開頭，就會(huì)被nginx轉(zhuǎn)發(fā)到后端接口服務(wù)器上；
總結(jié)：nginx實(shí)現(xiàn)跨域的原理，實(shí)際就是把web項(xiàng)目和后端接口項(xiàng)目放到一個(gè)域中，這樣就不存在跨域問題，然后根據(jù)請(qǐng)求地址去請(qǐng)求不同服務(wù)器（真正干活的服務(wù)器）；
看完這篇文章，你能夠獨(dú)立解決javascript解決跨域問題了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀。
網(wǎng)站欄目：javascript如何解決跨域問題
分享路徑：http://fisionsoft.com.cn/article/ggcdig.html
