摘要：反向代理前后端聯調跨域什么是跨域跨域，指的是瀏覽器不能執行其他網站的腳本。這時候，用反向代理實現跨域，是最簡單的跨域方式。

keywords： Nginx反向代理 前后端聯調 跨域

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

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

目前來講沒有不依靠服務器端來跨域請求資源的技術
　　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服務器，用于轉發請求。

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

淘寶前后端分離實踐

項目前后端分離后，前后端項目分開開發，尤其是單頁面應用，前端代碼會開啟多帶帶的服務器，若直接在前端項目中訪問后端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:developproject1dirapp; #配置別名到項目源代碼目錄，那么訪問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:developproject1dirappDist;  #此文件夾可以是項目打包后的上線代碼文件，也可以是第二個項目源代碼文件
            # 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;
    #    }
    #}

}