成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

Nginx反向代理解決前后端聯(lián)調(diào)跨域問題

QiuyueZhong / 1886人閱讀

摘要：反向代理前后端聯(lián)調(diào)跨域什么是跨域跨域，指的是瀏覽器不能執(zhí)行其他網(wǎng)站的腳本。這時(shí)候，用反向代理實(shí)現(xiàn)跨域，是最簡單的跨域方式。

keywords： Nginx反向代理 前后端聯(lián)調(diào) 跨域

1.什么是跨域

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

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

2.跨域的常見解決方法

目前來講沒有不依靠服務(wù)器端來跨域請求資源的技術(shù)
　　1.jsonp 需要目標(biāo)服務(wù)器配合一個(gè)callback函數(shù)。
　　2.window.name+iframe 需要目標(biāo)服務(wù)器響應(yīng)window.name。
　　3.window.location.hash+iframe 同樣需要目標(biāo)服務(wù)器作處理。
　　4.html5的 postMessage+ifrme 這個(gè)也是需要目標(biāo)服務(wù)器或者說是目標(biāo)頁面寫一個(gè)postMessage，主要側(cè)重于前端通訊。
　　5.CORS 需要服務(wù)器設(shè)置header ：Access-Control-Allow-Origin。
　　6.nginx反向代理 這個(gè)方法一般很少有人提及，但是他可以不用目標(biāo)服務(wù)器配合，不過需要你搭建一個(gè)中轉(zhuǎn)nginx服務(wù)器，用于轉(zhuǎn)發(fā)請求。

3.為什么要前后端分離

● 關(guān)注點(diǎn)分離 ● 職責(zé)分離 ● 對的人做對的事 ● 更好的共建模式 ● 快速的反應(yīng)變化

淘寶前后端分離實(shí)踐

4.nginx反向代理實(shí)現(xiàn)跨域和便捷的前后端聯(lián)調(diào)

項(xiàng)目前后端分離后，前后端項(xiàng)目分開開發(fā)，尤其是單頁面應(yīng)用，前端代碼會開啟多帶帶的服務(wù)器，若直接在前端項(xiàng)目中訪問后端API，肯定會遇到因跨域不能訪問的問題。

這時(shí)候，用nginx反向代理實(shí)現(xiàn)跨域，是最簡單的跨域方式。只需要修改nginx的配置即可解決跨域問題，支持所有瀏覽器，支持session，不需要修改任何代碼，并且不會影響服務(wù)器性能。

我們只需要配置nginx，在一個(gè)服務(wù)器上配置多個(gè)前綴來轉(zhuǎn)發(fā)http/https請求到多個(gè)真實(shí)的服務(wù)器即可。這樣，這個(gè)服務(wù)器上所有url都是相同的域名、協(xié)議和端口。因此，對于瀏覽器來說，這些url都是同源的，沒有跨域限制。而實(shí)際上，這些url實(shí)際上由物理服務(wù)器提供服務(wù)。這些服務(wù)器內(nèi)的javascript可以跨域調(diào)用所有這些服務(wù)器上的url。

將nginx目錄下的nginx.conf修改如下，這里配置了兩臺server，如果只需一臺，把其中一個(gè)server刪除即可。之所以配置兩臺服務(wù)器，是前端可能同時(shí)在開發(fā)兩個(gè)項(xiàng)目，或者同一個(gè)項(xiàng)目開發(fā)環(huán)境和生成環(huán)境各自開啟一個(gè)服務(wù)，方便調(diào)試。

#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;  #配置第一臺服務(wù)器
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            #alias D:developproject1dirapp; #配置別名到項(xiàng)目源代碼目錄，那么訪問http://localhost:9000/即訪問此目錄
            # Frontend Server
            proxy_pass http://localhost:8001/;  #更聰明的做法是代理到前端服務(wù)器地址，比如gulp+browser-sync開啟的服務(wù)器，能看到代碼實(shí)時(shí)更新效果
        }

        location /api/ {
            rewrite ^/api/(.*)$ /$1 break;   #所有對后端的請求加一個(gè)api前綴方便區(qū)分，真正訪問的時(shí)候移除這個(gè)前綴
            # API Server
            proxy_pass http://www.serverA.com;  #將真正的請求代理到serverA,即真實(shí)的服務(wù)器地址，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;  #配置第二臺服務(wù)器
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            #alias D:developproject1dirappDist;  #此文件夾可以是項(xiàng)目打包后的上線代碼文件，也可以是第二個(gè)項(xiàng)目源代碼文件
            # Frontend Server
            proxy_pass http://localhost:8002/;  #前端服務(wù)器地址，比如gulp+browser-sync開啟的服務(wù)器，能看到代碼實(shí)時(shí)更新效果
        }

        location /api/ {
            rewrite ^/api/(.*)$ /$1 break;  #所有對后端的請求加一個(gè)api前綴方便區(qū)分，真正訪問的時(shí)候移除這個(gè)前綴
            # API Server
            proxy_pass http://serverB.com;  #將真正的請求代理到serverB,即真實(shí)的服務(wù)器地址，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;
    #    }
    #}

}

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/39609.html

相關(guān)文章

  • 前后端分離后開發(fā)階段跨域問題處理

    摘要：前后端分離之后，開發(fā)階段接口聯(lián)調(diào)就會出現(xiàn)跨域問題。當(dāng)然，跨域問題的解決方案還是挺多的，這里梳理下我接觸到的幾種方案。對于前端開發(fā)者來說，通信與同源的通信沒有差別，代碼完全一樣。后端實(shí)現(xiàn)接口只需合理設(shè)置，以為例 前后端分離之后，開發(fā)階段接口聯(lián)調(diào)就會出現(xiàn)ajax跨域問題。當(dāng)然，跨域問題的解決方案還是挺多的，這里梳理下我接觸到的幾種方案。 一、禁用Chrome的同源策略 目測這是最簡單粗暴的...

    FrozenMap 評論0 收藏0

  • 跨域問題匯總

    摘要：因?yàn)闉g覽器的同源策略，前端開發(fā)會遇到各種跨域問題。前言在總結(jié)各種跨域問題之前，我們先來了解一下瀏覽器的同源策略。所以只能解決一級域名相同二級域名不同的跨域問題。 跨域問題的場景和解決方案多種多樣，只要是做前端開發(fā)，總會遇到。而且面試時(shí)也是必問的問題。所以自己學(xué)習(xí)總結(jié)記錄一下。 因?yàn)闉g覽器的同源策略，前端開發(fā)會遇到各種跨域問題。本篇文章總結(jié)了遇到跨域問題的不同的場景以及對應(yīng)的解決方案。 ...

    MkkHou 評論0 收藏0

  • Nginx

    摘要：此外，其也能夠提供強(qiáng)大的反向代理功能。是由為俄羅斯訪問量第二的站點(diǎn)開發(fā)的，第一個(gè)公開版本發(fā)布于年月日。 keepalived+nginx 實(shí)現(xiàn)高可用雙機(jī)熱備 + 負(fù)載均衡架構(gòu) 1 準(zhǔn)備4個(gè)ubuntu16.04虛擬機(jī)（啟用網(wǎng)卡二并使用橋接模式）:A服務(wù)器：192.168.0.103 主B服務(wù)器：192.168.0.104 主（備） 前端工程師學(xué)習(xí) Nginx ...

    syoya 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<