1.什么是跨域？

跨域：指的是瀏覽器不能執(zhí)行其他網(wǎng)站的腳本。它是由瀏覽器的同源策略造成的，是瀏覽器對javascript施加的安全限制。

例如：a頁面想獲取b頁面資源，如果a、b頁面的協(xié)議、域名、端口、子域名不同，所進行的訪問行動都是跨域的，而瀏覽器為了安全問題一般都限制了跨域訪問，也就是不允許跨域請求資源。注意：跨域限制訪問，其實是瀏覽器的限制。理解這一點很重要！?。?/p>

同源策略：是指協(xié)議，域名，端口都要相同，其中有一個不同都會產(chǎn)生跨域；

2.跨域訪問示例

假設(shè)有兩個網(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的異步請求）

$(function (){

??? $.get("http://localhost:82/api/values", {},function (result) {

????????? $("#show").html(result);

? })})；

從錯誤信息可以看出以上出現(xiàn)了跨域問題！

3.如何解決跨域問題？

由之前的介紹我們已經(jīng)知道錯誤的原因，既然跨域會產(chǎn)生問題，那么我們就不跨域不就完了嘛?。?！

先上圖：

首先我們用nginx作為代理服務(wù)器和用戶交互，這樣用戶就只需要在80端口上進行交互就可以了，這樣就避免了跨域問題，因為我們都是在80端口上進行交互的；

下面我們看一下利用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/時會被nginx轉(zhuǎn)發(fā)到http://localhost:81服務(wù)；

2.當(dāng)界面請求接口數(shù)據(jù)時，只要以/apis 為開頭，就會被nginx轉(zhuǎn)發(fā)到后端接口服務(wù)器上；

總結(jié)：nginx實現(xiàn)跨域的原理，實際就是把web項目和后端接口項目放到一個域中，這樣就不存在跨域問題，然后根據(jù)請求地址去請求不同服務(wù)器（真正干活的服務(wù)器）；