Nginx反向代理解決先後端聯調跨域問題

keywords： Nginx反向代理 先後端聯調 跨域

---

1.什麼是跨域

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

所謂同源是指，域名，協議，端口都相同。瀏覽器執行javascript腳本時，會檢查這個腳本屬於哪一個頁面，若是不是同源頁面，就不會被執行。

2.跨域的常看法決方法

目前來說沒有不依靠服務器端來跨域請求資源的技術
　　1.jsonp 須要目標服務器配合一個callback函數。
　　2.window.name+iframe 須要目標服務器響應window.name。
　　3.window.location.hash+iframe 一樣須要目標服務器做處理。
　　4.html5的 postMessage+ifrme 這個也是須要目標服務器或者說是目標頁面寫一個postMessage，主要側重於前端通信。
　　5.CORS 須要服務器設置header ：Access-Control-Allow-Origin。
　　6.nginx反向代理 這個方法通常不多有人說起，可是他能夠不用目標服務器配合，不過須要你搭建一箇中轉nginx服務器，用於轉發請求。

3.爲何要先後端分離

● 關注點分離 ● 職責分離 ● 對的人作對的事 ● 更好的共建模式 ● 快速的反應變化

淘寶先後端分離實踐

4.nginx反向代理實現跨域和便捷的先後端聯調

項目先後端分離後，先後端項目分開開發，尤爲是單頁面應用，前端代碼會開啓單獨的服務器，若直接在前端項目中訪問後端API，確定會遇到因跨域不能訪問的問題。

這時候，用nginx反向代理實現跨域，是最簡單的跨域方式。只須要修改nginx的配置便可解決跨域問題，支持全部瀏覽器，支持session，不須要修改任何代碼，而且不會影響服務器性能。

咱們只須要配置nginx，在一個服務器上配置多個前綴來轉發http/https請求到多個真實的服務器便可。這樣，這個服務器上全部url都是相同的域名、協議和端口。所以，對於瀏覽器來講，這些url都是同源的，沒有跨域限制。而實際上，這些url實際上由物理服務器提供服務。這些服務器內的javascript能夠跨域調用全部這些服務器上的url。

將nginx目錄下的nginx.conf修改以下，這裏配置了兩臺server，若是隻需一臺，把其中一個server刪除便可。之因此配置兩臺服務器，是前端可能同時在開發兩個項目，或者同一個項目開發環境和生成環境各自開啓一個服務，方便調試。

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


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

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       9000;  #配置第一臺服務器
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            #alias D:\\develop\\project1dir\\app\\; #配置別名到項目源代碼目錄，那麼訪問http://localhost:9000/即訪問此目錄
            # Frontend Server
            proxy_pass http://localhost:8001/;  #更聰明的作法是代理到前端服務器地址，好比gulp+browser-sync開啓的服務器，能看到代碼實時更新效果
        }

        location /api/ {
            rewrite ^/api/(.*)$ /$1 break;   #全部對後端的請求加一個api前綴方便區分，真正訪問的時候移除這個前綴
            # API Server
            proxy_pass http://www.serverA.com;  #將真正的請求代理到serverA,即真實的服務器地址，ajax的url爲/api/user/1的請求將會訪問http://www.serverA.com/user/1
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }
    server {
        listen       9001;  #配置第二臺服務器
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            #alias D:\\develop\\project1dir\\appDist\\;  #此文件夾能夠是項目打包後的上線代碼文件，也能夠是第二個項目源代碼文件
            # Frontend Server
            proxy_pass http://localhost:8002/;  #前端服務器地址，好比gulp+browser-sync開啓的服務器，能看到代碼實時更新效果
        }

        location /api/ {
            rewrite ^/api/(.*)$ /$1 break;  #全部對後端的請求加一個api前綴方便區分，真正訪問的時候移除這個前綴
            # API Server
            proxy_pass http://serverB.com;  #將真正的請求代理到serverB,即真實的服務器地址，ajax的url爲/api/user/1的請求將會訪問http://www.serverB.com/user/1
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }




    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}