使用nginx反向代理解決前端跨域問題


1.

首先去Nginx官網下載一個最新版本的Nginx,下載地址:http://nginx.org/en/download.html。我這里下載的版本是:nginx/Windows-1.12.0。下載完成之后,得到一個.zip的壓縮包,把壓縮包解壓到E盤根目錄。如圖1-1

 

2.

打開目錄 E:\nginx\conf ,編輯nginx.conf文件,修改成如下:

#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 {
client_max_body_size 100M; 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 80; # nginx訪問端口 server_name localhost; # nginx訪問域名 location / { proxy_pass http://127.0.0.1:8020; # 前端靜態頁面地址 proxy_redirect default; #設置主機頭和客戶端真實地址,以便服務器獲取客戶端真實IP proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } location /apis { # 自定義nginx接口前綴 rewrite ^/apis/(.*)$ /$1 break; # 監聽所有/apis前綴,是則轉發后台api接口地址 include uwsgi_params; proxy_pass http://127.0.0.1:8080; # 后台api接口地址 #設置主機頭和客戶端真實地址,以便服務器獲取客戶端真實IP proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } }

 注: 如果項目接口路徑后面帶前綴的,需要如下設置:

 

        location /apis/ {                                # 自定義nginx接口前綴
            rewrite ^/apis\//(.*)$ /$1 break; # 監聽所有/apis前綴,是則轉發后台api接口地址
            include  uwsgi_params;
            proxy_pass   http://127.0.0.1:8080/ser/;     # 后台api接口地址
            #設置主機頭和客戶端真實地址,以便服務器獲取客戶端真實IP
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;                
        }

 

可以參考:nginx proxy_pass末尾神奇的斜線

 

http://chenwenming.blog.51cto.com/327092/1203537 
在nginx中配置proxy_pass時,當在后面的url加上了/,相當於是絕對根路徑,則nginx不會把location中匹配的路徑部分代理走;如果沒有/,則會把匹配的路徑部分也給代理走。
 
下面四種情況分別用http://192.168.1.4/proxy/test.html 進行訪問。
第一種:
location  /proxy/ {
          proxy_pass http://127.0.0.1:81/;
}
會被代理到http://127.0.0.1:81/test.html 這個url
 
第二咱(相對於第一種,最后少一個 /)
location  /proxy/ {
          proxy_pass http://127.0.0.1:81;
}
會被代理到http://127.0.0.1:81/proxy/test.html 這個url
 
第三種:
location  /proxy/ {
          proxy_pass http://127.0.0.1:81/ftlynx/;
}
會被代理到http://127.0.0.1:81/ftlynx/test.html 這個url。
 
第四種情況(相對於第三種,最后少一個 / ):
location  /proxy/ {
          proxy_pass http://127.0.0.1:81/ftlynx;
}
會被代理到http://127.0.0.1:81/ftlynxtest.html 這個url
 
上面的結果都是本人結合日志文件測試過的。從結果可以看出,應該說分為兩種情況才正確。即http://127.0.0.1:81 (上面的第二種) 這種和 http://127.0.0.1:81/.... (上面的第1,3,4種) 這種。
 
 
-----------------------------------------------------------------------------------------
nginx proxy_pass末尾神奇的/
http://backend;和http://backend/;有什么區別呢?

        location /service/ {
            proxy_pass   http://backend;
            proxy_next_upstream error timeout invalid_header http_500 http_503 http_404;
        }
        location /service/ {
            proxy_pass   http://backend/;
            proxy_next_upstream error timeout invalid_header http_500 http_503 http_404;
        }
同樣訪問:http://neverstay.com/service/add.php
前者配置,在后端的機器,收到的是http://neverstay.com/service/add.php
后者配置,在后端的機器,收到的是http://neverstay.com/add.php
如果換成下面這樣,會報錯:
        location ~ ^/(service)/ {
            proxy_pass   http://backend/;
            proxy_next_upstream error timeout invalid_header http_500 http_503 http_404;
        }
"proxy_pass" may not have URI part in location given by regular expression, or inside named location, or inside the "if" statement, or inside the "limit_except" block in nginx.conf:
但是,這樣就沒問題了:
        location ~ ^/(service)/ {
            proxy_pass   http://backend;
            proxy_next_upstream error timeout invalid_header http_500 http_503 http_404;
        }
把proxy_pass末尾的斜線去掉,就可以了。

 

3.

啟動nginx,進入目錄 E:\nginx,點擊空白處,按住Shift + 鼠標右鍵 --> 點擊“在此處打開命令窗口”,輸入命令:

啟動:start nginx

停止:nginx -s stop

重啟:nginx -s reload

 

4.

訪問 http://localhost/前端項目名/index.html 

 

5.

ajax接口訪問地址由原來的 http://127.0.0.1:8080/api/xxx...

變成:/apis/api/xxx...

 

 

附:使用nginx后,后台獲取請求頭的一些信息。

###### 不用nginx代理
referer--------------http://localhost:8066/index.html
accept-language--------------zh-CN,zh;q=0.9
cookie--------------Hm_lvt_b393d153aeb26b46e9431fabaf0f6190=1510729582; Idea-d796403=72c2352f-4ec9-4a5f-8ccf-15f7de01060b; JSESSIONID=ae31cfd7-b6d7-4c89-af96-a1496fff62c3
host--------------localhost:8066
upgrade-insecure-requests--------------1
connection--------------keep-alive
accept-encoding--------------gzip, deflate, br
user-agent--------------Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36
accept--------------text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8


###### 使用nginx代理,但不配置可獲取客戶端真實ip地址
referer--------------http://127.0.0.1/soeasy/soeasy-web/src/main/webapp/index.html
accept-language--------------zh-CN,zh;q=0.9
cookie--------------Idea-d796403=72c2352f-4ec9-4a5f-8ccf-15f7de01060b; JSESSIONID=c36ff1a3-f4f6-46aa-936f-26474a4b31b2
host--------------127.0.0.1:8066
upgrade-insecure-requests--------------1
connection--------------close
accept-encoding--------------gzip, deflate, br
user-agent--------------Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36
accept--------------text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8


###### 使用nginx代理,並且配置可獲取客戶端真實ip地址
x-real-ip--------------127.0.0.1
referer--------------http://localhost/soeasy/soeasy-web/src/main/webapp/index.html
accept-language--------------zh-CN,zh;q=0.9
cookie--------------Hm_lvt_b393d153aeb26b46e9431fabaf0f6190=1510729582; Idea-d796403=72c2352f-4ec9-4a5f-8ccf-15f7de01060b; JSESSIONID=c0de95b1-71da-41d9-a70b-62e8fb5d2a66
host--------------localhost
upgrade-insecure-requests--------------1
connection--------------close
x-forwarded-for--------------127.0.0.1
accept-encoding--------------gzip, deflate, br
user-agent--------------Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36
accept--------------text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM