跨域、vue雙向綁定相關面試題

Nginx反向代理實現跨域

我們只需要配置Nginx，在一個服務器上配置多個前綴來轉發http/https請求到多個真實的服務器即可。這樣這個服務器上所有URL都是相同的域名、協議和端口。因此，對於瀏覽器來說這些URL都是同源的，沒有跨域限制。而實際上這些URL實際上由物理服務器提供服務。這些服務器內的JavaScript可以跨域調用所有這些服務器上的URL。

簡單說，Nginx服務器欺騙了瀏覽器，讓它認為這是同源調用，從而解決了瀏覽器的跨域問題。

下面給出一個Nginx支持跨域的例子，進行具體說明。

服務器A(域名:www.hi-linux.com)中有一個頁面，想請求服務器B(域名:www.imike.me)中的api地址(http://www.imike.me/api)獲取數據。

• Nginx配置

修改配置文件

server {
 listen 80;
 server_name www.hi-linux.com;
 root /var/www/html;
 autoindex off;
 index index.html index.htm index.php;
 # 將www.hi-linux.com/api的所有請求反向代理到www.imike.me
	
 location ~ ^/api/ { 

 proxy_pass http://www.imike.me;
 proxy_redirect off; 
 proxy_set_header X-Real-IP $remote_addr; 
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
 }
 location ~ /\.ht {
 deny all;
 }
}

重啟Nginx

/etc/init.d/nginx restart

• 修改JS代碼中的地址

function getID(){ 
		jQuery.get("http://www.hi-linux.com/api/GetData?id=1”, 
		 function (data, textStatus){ 
 this; // 在這裡this指向的是Ajax請求的選項配置信息 
 if(textStatus=="success"){ 
 jQuery("#CountNum").html(data); 
 } 
 }); 
}

閱讀更多 前端攻城小牛 的文章

關鍵字: 跨域 瀏覽器 JavaScript