Linux下Nginx跨域問題——前後端分離項目（SpringBoot+Vue）

強烈推薦學習一下如下視訊，2倍速一小時左右。

Nginx學習視訊 傳送門（點我）

資料文檔 傳送門（點我）

提取碼:

7ii3

如果是解決Vue+SpringBoot部署時的跨域問題，強烈推薦此視訊：傳送門（點我）

第96、97節

目錄

• 1.問題
• 2.如果前端給後端發請求時沒有/api/之類解決辦法
• 3.現在所用配置

1.問題

找了很多資料，稍微明白一點，我開始隻是因為前端向後端發請求的時候格式如下

因為是前端向後端請求以斜杠開頭的，這個時候如果将靜态資源也轉發到

/

就會與後端沖突，查找了很多資料，終于解決了。

陷入了一個很大的誤區是，Nginx配置前端靜态資源的時候不要這樣寫, 這樣寫的後果就是

/

會被轉發到前端頁面，而我們需要的是

/

發起的請求發到後端 。

location /{
         root    /www/server/nginx/html/chatroom;
         index  index.html index.htm;
  }
           

目錄如下

這樣寫導緻的一個後果就是，前端給後端發請求時，斜杠已經配置了，導緻後端不知道該怎麼配了。我看網上有的人是 在前端代碼中給後端發的所有請求加上一個/api/,然後在nginx中比對到api進行進而轉發。但這樣需要修改大量的前端代碼，前端給後端所有發請求的地方。

此時前端請求格式如下

this.postKeyValueRequest('/api/admin/doLogin',this.loginForm)
 #這個/api/隻是為了友善比對然後在轉發的時候去除
           

server
    {
          listen       80;
          server_name  59.110.142.11;
        #   前端頁面
          location /{
              root    /www/server/nginx/html/chatroom;
              index  index.html index.htm;
            #   開啟後不會導緻重新整理白屏
              try_files $uri $uri/ /index.html;
          }

          error_page   500 502 503 504  /50x.html;
          location = /50x.html {
              root   /www/server/nginx/html/error;
          }
        #   後端請求轉發
          location /api/ {
           #移除字首api
           rewrite ^/api/(.*)$ /$1 break;  
           proxy_pass http://59.110.142.11:8084;  
           #将真正的請求代理到真實的伺服器位址，ajax的url為/api/user/1的
           #請求将會通路http://59.110.142.11:8084/user/1
         }
        #  WebSocket
         location /ws/ {
             proxy_pass http://59.110.142.11:8084;  
         }
         
    }
include /www/server/panel/vhost/nginx/*.conf;
}
           

2.如果前端給後端發請求時沒有/api/之類解決辦法

server
    {
          listen       80;
          server_name  59.110.142.11;
        #   前端頁面
          location /chatroom/{
              root    /www/server/nginx/html/;
              index  index.html index.htm;
            #   開啟後不會導緻重新整理白屏
              try_files $uri $uri/ /index.html;
          }

          
          error_page   500 502 503 504  /50x.html;
          location = /50x.html {
              root   /www/server/nginx/html/error;
          }
          
        #   前端請求的靜态資源
          location /js/{
              root    /www/server/nginx/html/chatroom/;
              autoindex on;
          }
          location /css/{
              root    /www/server/nginx/html/chatroom/;
              autoindex on;
          }
            location /fonts/{
              root    /www/server/nginx/html/chatroom/;
              autoindex on;
          }
          location /img/{
              root    /www/server/nginx/html/chatroom/;
              autoindex on;
          }
  
         location ~* \.(gif|jpg|jpeg|js|ttf|png|ico)$ {
            root    /www/server/nginx/html/chatroom/;
         }
        #   請求轉發到後端
      	  location /{
            proxy_pass http://59.110.142.11:8084;  
          }
        #  WebSocket
         location /ws/ {
             proxy_pass http://59.110.142.11:8084;  
         }
        
    }
include /www/server/panel/vhost/nginx/*.conf;
}
           

3.現在所用配置

因為第一次搭網站，前面很多配置都不熟悉，記錄一下自己用的

server
    {
          listen       80;
          server_name  59.110.142.11;
          #  前端頁面
          location /{
              root    /www/server/nginx/html/web;
              index  index.html index.htm;
              try_files $uri $uri/ /index.html;
          }

          error_page   500 502 503 504  /50x.html;
          location = /50x.html {
              root   /www/server/nginx/html/error;
          }
         #  後端admin子產品請求轉發
          location /api/ {
           #移除字首api
           rewrite ^/api/(.*)$ /$1 break;  
              #将真正的請求代理到真實的伺服器位址，ajax的url為/api/user/1的
              #請求将會通路http://59.110.142.11:8084/user/1
              #跨域問題
              add_header X-Frame-Options ALLOWALL; 
              proxy_http_version 1.1; 
              proxy_set_header Upgrade $http_upgrade;                
              proxy_set_header Connection "upgrade";    
              proxy_pass http://59.110.142.11:8084;  
         }
          #  後端chat子產品請求轉發
          location /chat/ {
               rewrite ^/chat/(.*)$ /$1 break;  
               #跨域問題
               add_header X-Frame-Options ALLOWALL; 
               proxy_http_version 1.1; 
               proxy_set_header Upgrade $http_upgrade;                
               proxy_set_header Connection "upgrade";
               proxy_pass http://59.110.142.11:8084;  
              
         }
        #  WebSocket
         location /ws/ {
            #跨域問題
             add_header X-Frame-Options ALLOWALL; 
             proxy_http_version 1.1; 
             proxy_set_header Upgrade $http_upgrade;                
             proxy_set_header Connection "upgrade";    
             proxy_pass http://59.110.142.11:8084;  
             
             
         }
         #   後端show子產品請求轉發
          location /show/ {
           rewrite ^/show/(.*)$ /$1 break;  
            #跨域問題
            add_header X-Frame-Options ALLOWALL; 
               proxy_http_version 1.1; 
               proxy_set_header Upgrade $http_upgrade;                
               proxy_set_header Connection "upgrade"; 
           proxy_pass http://59.110.142.11:8086;  
    
         }
    }
include /www/server/panel/vhost/nginx/*.conf;
}