跨域方案Nginx配置

什麼是瀏覽器同源策略？#

同源策略限制了從同一個源加載的文檔或腳本如何與來自另一個源的資源進行交互。這是一個用於隔離潛在惡意文件的重要安全機制。

同源是指 "協議 + 域名 + 端口" 三者相同，即便兩個不同的域名指向同一個 ip 地址，也非同源。

如何實現跨域？#

跨域是個比較古老的命題了，歷史上跨域的實現手段有很多，我們現在主要介紹 Nginx 的跨域方案，其餘的方案我們就不深入討論了。

方便的跨域方案 Nginx#

nginx 是一款極其強大的 web 服務器，其優點就是輕量級、啟動快、高並發。

現在的新項目中 nginx 幾乎是首選，我們用 node 或者 go 開發的服務通常都需要經過 nginx 的反向代理。

反向代理的原理很簡單，即所有客戶端的請求都必須先經過 nginx 的處理，nginx 作為代理服務器再將請求轉發給 node 或者 go 服務，這樣就規避了同源策略。

#進程, 可更具cpu數量調整
worker_processes  1;

events {
    #連接數
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

    #連接超時時間，服務器會在這個時間過後關閉連接。
    keepalive_timeout  10;

    # gizp壓縮
    gzip  on;

    # 直接請求nginx也是會報跨域錯誤的這裡設置允許跨域
    # 如果代理地址已經允許跨域則不需要這些, 否則報錯(雖然這樣nginx跨域就沒意義了)
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Headers X-Requested-With;
    add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

    # srever模塊配置是http模塊中的一個子模塊，用來定義一個虛擬訪問主機
    server {
        listen       80;
        server_name  localhost;
        
        # 根路徑指到index.html
        location / {
            root   html;
            index  index.html index.htm;
        }

        # localhost/api 的請求會被轉發到192.168.0.103:8080
        location /api {
            rewrite ^/b/(.*)$ /$1 break; # 去除本地接口/api前綴, 否則會出現404
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://192.168.0.103:8080; # 轉發地址
        }
        
        # 重定向錯誤頁面到/50x.html
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}