什么是跨域，Nginx解決跨域問題

什么是跨域

指的是瀏覽器不能執行其他網站的腳本。它是由瀏覽器的同源策略造成的，是瀏覽器對javascript施加的安全限制。

例如：

a頁面想獲取b頁面資源，如果a/b頁面的協議，域名，端口，子域名不同，不同，所進行的訪問行動都是跨域的，而瀏覽器為了安全問題

一般都限制了跨域訪問，也就是不允許跨域請求資源。

注意：

跨域限制訪問，其實是瀏覽器的限制！

同源策略：

是指協議，域名，端口都要相同，其中有一個不同都會產生跨域

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	同一域名下不同協議	不允許
http://www.a.com/a.js http://1.2.3.4/b.js	域名和域名對應的ip	不允許
http://www.a.com/a.js http://script.a.com/b.js	主域名相同，子域名不同	不允許
http://www.a.com/a.js	同一域名，不同二級域名	不允許
http://www.cnblogs.com/a.js http://www.a.com/b.js	不同域名	不允許

 

跨域訪問示例：

假設有兩個網站，A網站部署在：http://localhost:81上，B網站部署在：http://localhost:82上。現在A網站的頁面想去訪問B網站的信息，A網站的代碼如下：

$(function(){
    $.get("http://localhost:82/api/values", {}, function(result){
        $("#show").html(result);
    })
})

結果：

 

解決跨域：

使用nginx作為代理服務器和用戶交互，這樣用戶就只需要在80端口上面交互就可以了，避免了跨域問題

使用nginx配置反向代理：

server{
    listen 80; # 監聽80端口
    server_name localhost; # 當前服務的域名
    location / {
        # 當用戶發送localhost:80時就會被轉發到這里
        proxy_pass http://localhost:81;
        proxy_redirect default;
    }
    location / apis {
        rewrite ^/apis(.*)$ /$1 break;
        # 當界面請求接口數據時，只要以/apis開頭，會被轉發到這里
        proxy_pass http://localhost:82; 
    }
}
# 其他配置省略