Django+Vue項目學習第七篇：利用nginx解決跨域問題

傳送門：

Django+Vue項目學習第一篇：django后台搭建

Django+Vue項目學習第二篇：vue項目創建 

Django+Vue項目學習第三篇：使用axios發送請求，解決跨域問題，調通前后端 

Django+Vue項目學習第四篇：使用axios發送攜帶參數的get請求

Django+Vue項目學習第五篇：vue+django發送post請求，解決csrf認證問題

Django+Vue項目學習第六篇：vue+django發送post請求，設置不同content-type，前后端如何處理參數 

前面在學習django+vue時，通過安裝 django-cors-headers包，然后進行了相關的配置來處理跨域請求

今天介紹另一種方法：利用nginx來解決跨域問題

1、安裝並啟動nginx

關於nginx的安裝網上有很多資料，根據自己的運行環境安裝即可

安裝好后啟動nginx，瀏覽器輸入：localhost ，應該可以看到如下頁面

2、修改nginx.conf配置

(1) 首先我在A電腦上分別啟動了django項目和vue項目

啟動django時指定了A電腦的ip，如下

python manage.py runserver 192.168.1.x:8000

也就是說訪問后端服務，需要通過這個ip:port才可以

(2)vue項目也部署在A電腦，所以前端的ip也是這個，啟動后如下

(3)配置nginx反向代理

打開nginx.conf文件，在server下新增一個location

server {
        listen 8089;
        server_name localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }
        
       
       location /create_data {                
              proxy_pass  http://192.168.1.8:8000;
              proxy_set_header        Host $host;
              proxy_set_header        X-Real-IP $remote_addr;  #獲取真實ip
              proxy_connect_timeout   90;
              proxy_send_timeout      90;
              proxy_read_timeout      90;
              proxy_buffer_size       4k;
              proxy_buffers           4 32k;
              proxy_busy_buffers_size 64k;
              proxy_temp_file_write_size 64k;
              proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;#獲取代理者的真實ip
              proxy_redirect          off;
       }

        ......
        ...... 
        ......
    }

listen和server_name保持不動；

listen 表示nginx監聽的端口(這里我把默認的80改為了8089，通過nginx訪問代理服務時，使用8089端口)；

server_name指定(虛擬主機)服務器名稱，一般會配置域名(example.org ，www.example.org，可以使用精確的名稱、通配符名稱或正則表達式定義；當你在外網訪問一個請求鏈接時，nginx會根據你填寫的主機名稱來匹配是轉發到哪個server，一個nginx下可以配置多個server)；

location 配置

location /create_data {                
              proxy_pass  http://192.168.1.8:8000;
......
......

因為我的django接口都是以 /create_data 為根路由的，所以想要所有以 /create_data 開頭的請求都轉到這個路由下，因此給這個location配置了/create_data

location塊下的 proxy_pass 配置的是django服務的 ip:port,

綜合來看，也就是說通過nginx轉發來的請求，如果它是以/create_data開頭的，就把它轉發到 proxy_pass 配置的服務器上，所以最終的請求是 http://192.168.1.8:8000/create_data/xxx

配置好后，重啟nginx

(4)修改axios請求

因為我們要通過nginx來反向代理，把前端發的請求通過nginx轉發到后端，

所以nginx配置好后，需要修改下前端的請求地址

axios({
    url: "http://192.168.1.8:8089/create_data/phone" //如果不指定method，默認發送get請求 
}).then(res => { this.info = res.data console.log(res) })

注意這里url的寫法，這里要寫nginx服務的ip+端口(不要和之前一樣，直接寫django服務的ip+端口)

可以看到上述ip中，端口號為8089，因為nginx配置文件中監聽的端口為8089；

所以整個過程是：

1、前端點擊按鈕，觸發axios請求，客戶端發送請求 http://192.168.1.8:8089/create_data/phone

2、8089是nginx監聽的端口，所以首先請求會到nginx那里，nginx一看根路徑是/create_data，就把它轉發給location下配置的 proxy_pass，也就是 http://192.168.1.8:8000

3、最終的請求就是 http://192.168.1.8:8000/create_data/phone，這個ip+port就是django服務的，所以django接收到這個請求，處理后給出響應結果

查看效果

在另一台電腦瀏覽器輸入 http://192.168.1.8:8080/，點擊按鈕

發現報如下錯誤

原因是nginx沒有設置哪些域名可以跨域，所以nginx.conf需要再加一下配置，設置允許跨域訪問，如下標紅的地方(我們是通過vue前端來訪問，所以需要配置vue項目啟動后的訪問地址)

location /create_data {                
              proxy_pass  http://192.168.1.8:8000;
              add_header Access-Control-Allow-Origin http://192.168.1.8:8080;
              proxy_set_header        Host $host;
              proxy_set_header        X-Real-IP $remote_addr;  #獲取真實ip
              proxy_connect_timeout   90;
              proxy_send_timeout      90;
              proxy_read_timeout      90;
              proxy_buffer_size       4k;
              proxy_buffers           4 32k;
              proxy_busy_buffers_size 64k;
              proxy_temp_file_write_size 64k;
              proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;#獲取代理者的真實ip
              proxy_redirect          off;
       }

這樣配置也可  add_header Access-Control-Allow-Origin *;  # 允許任何域名跨域訪問(自己視情況而定)

最后檢查一下django項目的settings.py中是否有如下配置

ALLOWED_HOSTS = ['*']

這個默認是[]，如果啟動django時指定了ip+端口，則必須改為['*']，不然接口調不通(親測)

再次訪問，發現能夠正常拿到響應了

 

 

至此，通過nginx解決了前后端的跨域問題